1.水平居中:行内元素解决方案

适用元素:文字,链接,及其其它inline或者inline-*类型元素(inline-block,inline-table,inline-flex)

html部分代码:
<div>文字元素</div>
<nav>
<a href="">链接元素01</a>
<a href="">链接元素02</a>
<a href="">链接元素03</a>
</nav> css部分代码:
nav, div{
text-align: center;
}
/*
解决方案:
将inline元素包裹在一个display属性为block的父级元素中(如,div, nav)
设置这个父级元素属性: text-align:center即可
*/ /* 现在大家可以看到nav和div中的子元素水平居中了 */

2. 水平居中:块状元素解决方案

对于块状元素(display:block)来说,我们需要将它的左右外边距(即,margin-left,margin-right)设置为auto,即可实现块状元素的居中,如下:

 html部分代码:
<div class="center">
水平居中的块状元素
</div>
<p class="center">水平居中的块状元素</p> css部分代码:
/*
注意:需要居中的块元素需要有固定的宽度,否则无法实现居中,因为占据100%宽度
*/
div,p {
width: 200px; /* 这里需要设置元素宽度 */
height: 150px;
background: #222;
color: #FFF;
}
/* 定义居中关键属性 */
.center{
/* 这里可以设置顶端外边距 */
margin: 10px auto;
}
/* 现在大家可以看到居中效果的块状元素了 */

3.水平居中:多个块状元素解决方案

如果页面里有多个块状元素需要水平排列居中,可以将元素的display属性设置为inline-block,并且把父元素的text-align属性设置为center即可实现。

 html部分代码:
<div class="center">
水平居中的块状元素
</div>
<div class="center">
水平居中的块状元素
</div> <!--
现在大家可以看到以上两个块状元素水平横向排列并且居中
提示:如果需要将以上两个元素垂直排列居中的话,使用上一节的margin: 0 auto;即可实现
-->
css部分代码:
/*
解决方案:
设置这几个块状的元素display属性为inline-block,并且设置父元素text-align属性为center即可
*/
.center{
display:inline-block;
}
body{
text-align:center;
}
/* 元素美化 */
div{
width: 100px;
background: #222;
height: 50px;
color: #FFF;
padding: 10px;
}

4.水平居中:多个块状元素解决方案 (使用flexbox布局实现)

使用flexbox布局,只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可

 html部分代码:

<div>水平居中的块状元素</div>
<div>水平居中的块状元素</div> css部分代码: 解决方案:
设置需要水平居中的块状元素的父元素display为flex ,并且justify-content属性为center即可 body{
display: flex;
justify-content: center;
}
/* 页面美化元素 */
div{
width: 100px;
background: #222;
height: 50px;
color: #FFF;
padding: 10px;
margin: 10px;
}

5. 垂直居中:单行的行内元素解决方案

当一个行内元素,即inline,inline-*类型的元素需要居中的话,可以将它的height和line-height同时设置为父元素的高度即可实现垂直居中效果。

 html部分代码:

    <div id="container">
<a href="#">hello, gbtags.com</a>
</div> css部分代码: 解决方案:将inline元素的高度和line-height设备为一致即可
#container{
background: #222;
height: 200px;
}
/* 以下代码中,将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a{
height: 200px;
line-height:200px;
color: #FFF;
}

6.垂直居中:多行的行内元素解决方案

组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果,如下:

 html部分代码:

<div class="container">
<a href="#">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis blanditiis optio accusamus quia sapiente at labore consectetur in quasi veritatis possimus quod nihil aliquam vero saepe rem quas. Ratione eligendi!
</a>
</div> css部分代码:
解决方案:
使用display:table-cell和vertical-align来控制元素的居中效果
.container{
background: #222;
width: 300px;
height: 300px;
/* 以下属性垂直居中 */
display: table-cell;
vertical-align:middle;
}
a{
color:#FFF;
}

7. 垂直居中:已知高度的块状元素解决方案

html代码:

<div class="item">
</div> css代码: 解决方案:将待居中元素设置为绝对定位,并且设置margin-top为居中元素高度一半的负值
div{
width: 100px;
height: 100px;
background: #222
}
/* 以下为居中代码 */
.item{
top: 50%;
margin-top: -50px;
position: absolute;
padding:0;
}
/* 现在可以看到这个元素垂直居中了,如果元素有padding设置,请自己相对计算一下margin-top值 */

8.垂直居中:未知高度的块状元素解决方案

对于无法知道高度的元素,使用transform属性来垂直移动来实现垂直居中:

html代码:
<div class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sint repellendus ab aut quisquam eligendi est in deleniti.
</div> css代码:
解决方案:
因为无法指定margin-top的偏移量,所以这里使用transform属性,垂直移动-50%即可
div{
width: 150px;
background: #222;
color: #FFF;
}
/* 元素垂直居中代码 */
.item{
top: 50%;
position: absolute;
transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */
}

9. 水平垂直居中:已知高度和宽度的元素解决方案

html代码:

<div class="item">
</div>
css代码: 解决方案:
将设置元素绝对定位,并且设置margin-left和margin-right为居中元素(高度或宽度/2)的负值即可
div{
width: 150px;
height: 150px;
background: #222;
color: #FFF;
}
.item{
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
}
/* 以上代码即可保证一个已知高度和宽度的元素水平垂直都居中 */

10.水平垂直居中:未知高度和宽度元素解决方案

html代码:

<div class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis.
</div> css代码: 解决方案:将设置元素绝对定位,并且设置transform的translate为X,Y轴同时移动-50%即可
div{
background: #222;
color: #FFF;
}
/* 以下代码保证元素在水平和垂直方向上绝对居中 */
.item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

11.水平垂直居中:使用flex布局实现

 html代码:

<div class="parent">
<div class="item"></div>
</div>
css代码: 解决方案:设置flex布局,并且定义居中元素的父元素justify-content和align-items属性为center即可
/* 子元素CSS */
.item{
background: #222;
color: #FFF;
width: 100px;
height: 100px;
}
.parent{
display: flex;
justify-content:center;
align-items: center;
/* 注意这里需要设置高度来查看垂直居中效果 */
background: #AAA;
height: 300px;
}

注:以上资源整理自极客标签学习文档,推荐大家学习使用

附上网址:http://www.gbtags.com           

【前端】这可能是你看过最全的css居中解决方案了~的更多相关文章

  1. UI前端开发都是做什么的以及html、css、php、js等究竟是神马关系

    第一个问题: 1.UI,是视觉方面的呈现.一个网页首先由UI完成整体设计,然后把每一个模块切图,例如组件.logo.版块等.常用工具:PS,AI,DW. 2.前端,是将UI的设计代码化,因为计算机无法 ...

  2. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  3. js 处理日期 看着比较全,备用

    http://www.cnblogs.com/endora/archive/2012/12/06/endorahe.html js 处理日期 看着比较全,备用

  4. 仅以一个前端开发人员的角度看微信小程序

    看了几天的小程序(当然也包括了上手书写),才有了这篇博文,非技术贴,只是发表下个人观点,仅以个人技术能力来看小程序. 首先说下优点: 调试工具:官方的工具还是做了很多工作,包括监听文件变动自动刷新,编 ...

  5. 最全的前端Git基础命令,看完保证你会!

    常见信息 master: 默认开发分支 origin:默认远程版本库 Head: 默认开发分支 Head^:Head 的父提交 创建新仓库 git init git init [project-nam ...

  6. 前端调用接口报错看不到报错响应时 console.dir

    console.dir() 可以看到很多.log看不到的属性和方法

  7. 【开源】前端练手笔记,Chrome扩展应用程序(html+CSS+JS) (1)

    项目名称:github-notification 项目地址:https://github.com/WQTeam/github-notification 说明:本人打算抽时间学习前端(html + cs ...

  8. 前端开发规范:命名规范、html 规范、css 规范、js 规范

    上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...

  9. 回顾:前端模块化和AMD、CMD规范(全)

    先列举下一些著名言论: "我想定义一个 each 方法遍历对象,但页头的 util.js 里已经定义了一个,我的只能叫 eachObject 了,好无奈." "Requi ...

随机推荐

  1. [LC] 270. Closest Binary Search Tree Value

    Given a non-empty binary search tree and a target value, find the value in the BST that is closest t ...

  2. springboot支付项目之springboot集成jpa

    springboot集成spring-jpa 本文主要内容: 1:spring boot怎么集成spring-jpa以及第一个jpa查询示例 如jpa几个常用注解.lombok注解使用 2:怎么设置i ...

  3. 提高线程数,解决redis超时问题

    根据压测结果做出的修改历史: 第一步:只针对maxWorkerThreads.maxIoThreads和minWorkerThreads做了修改<processModel autoConfig= ...

  4. C段和旁注

    踩点常用手段有哪些 1.旁站注入:利用同一 主机上面不同网站的漏洞得到 webshell,从而利用主机上的程序或者是服务所暴露的 用户所在的物理路径进行入侵.网站共享主机漏洞是更为严谨的学术叫法 2. ...

  5. Java逆向工程(数据库表生成java类)

    说起来倒是挺简单的,就是听着名字感觉挺高大上.逆向工程方式有很多,比如mybatis就提供了一个这样的工具mybatis-genderator,这个我反正是没用过只是听说过,以前在公司都是用公司写好的 ...

  6. Jump Game (Medium)

    主要有两种思路: 一. 本题只需要判断能否到达最后一个数,那么可以采用贪心策略,到达某个位置i后,在直接在这个位置的基础上走nums[i]步,主要保证能一直前进,就能达到终点: 那么,什么时候才不能一 ...

  7. deeplearning.ai 神经网络和深度学习 week3 浅层神经网络

    1. 第i层网络 Z[i] = W[i]A[i-1] + B[i],A[i] = f[i](Z[i]). 其中, W[i]形状是n[i]*n[i-1],n[i]是第i层神经元的数量: A[i-1]是第 ...

  8. 多版本firefox共存

    https://blog.csdn.net/gavinxlf/article/details/53173034 https://blog.csdn.net/weixin_33979745/articl ...

  9. 基于Jquery的textarea滚动条插件(原创)

    之前项目中自己写的滚动条插件.先前太忙没有好好整理.现在项目间歇期拿出来整理后贴出来 Demo Here css 我是把mCustomScrollbar 的UI 扣下来的. 这里我要介绍下这个插件不错 ...

  10. js 实现排序算法 -- 快速排序(Quick Sort)

    原文: 十大经典排序算法(动图演示) 快速排序 快速排序的基本思想:通过一趟排序将待排记录分隔成独立的两部分,其中一部分记录的关键字均比另一部分的关键字小,则可分别对这两部分记录继续进行排序,以达到整 ...