CSS实现垂直居中的7种方法

html-css014

CSS实现垂直居中的7种方法,第1张

HTML：

CSS：

重点：父容器高度和子元素line-height一样的数值，内容中的行内元素就会垂直居中。

HTML：

CSS：

重点：给父元素添加一个伪元素::before，让这个伪元素的div高度为100%，这样其他div就可垂直居中了，但div 本身就是块级元素，而vertical-align是行内元素属性，则需要修改为inline-block。

HTML：

CSS：

重点：在父元素中设置相对定位position: relative，子元素设置绝对定位 position: absolute；top和left相对父元素的50%，与其搭配的 transformse: translate(-50% , -50%)表示X轴和Y轴方向水平居中。

HTML：

CSS：

重点：子元素绝对定位position:absolute,父元素相对定位position: relative，将上下左右的数值都设置为0，同时margin:auto。绝对定位是会脱离文档流的，这点要注意一下。

HTML：

CSS：

重点：给父元素设置display: flex布局，水平居中 justify-content: center，垂直居中align-items: center。

HTML：

CSS：

重点：父元素position定位为relative，子元素position定位为absolute。水平居中同理。calc居中要减多少要结合到自己的宽高设置多少再进行计算。

HTML：

CSS：

重点：将父元素设置display:table，子元素table-cell会自动撑满父元素。组合 display: table-cell、vertical-align: middle、text-align: center完成水平垂直居中。

前言：根据最近学习的课程，简单总结一下学习到的css左右布局以及居中方案。后期学习深入之后再回来进行css居中的完整总结。

给所有子元素添加 float: left ，给父元素加 clearfix 类，清除浮动

html:

css:

将内联元素外部的块级元素的 text-align 设置为 center ，即可实现内联元素（ inline 、 inline-block ）的水平居中。

演示

将固定宽度的块级元素的 margin-left 和 margin-right 设置为 auto ，即可实现块级元素的水平居中。

演示

将每个块级元素的 display 设置为 inline-block ，然后将它们的父容器的 text-align 设置为 center ，即可使多个块级元素水平居中。

演示

设置内联元素的行高（ line-heigt ）和内联元素的父元素的高度（ height ）相等，且内联元素的字体大小远小于行高，即可使内联元素垂直居中。

演示

通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，即可实现垂直居中。

演示

借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中

演示

采用css的flex布局实现最为简单有效。​display: flex

        

<div class="box">

           

 <div class="item">我要居中</div>

      

  </div>

        

.box {

            

display: flex

            

width: 200px

            

height: 200px

            

justify-content: center // 水平居中

            

align-items: center // 垂直居中

       

 }