html绝对居中的方式,css绝对居中几种方法

老师在课上罗列了几种用css绝对居中的方法，也列出了关键代码，这篇文章就作为上课内容的一个补充，文中所用图片也来自老师教案，老师教案传送门ʘᴗʘ：

01负外边距

基本思路：将设置了绝对定位的子元素水平和垂直偏移50%，然后在水平和垂直方向分别偏移负自身宽高的一半，示意图如下：

代码如下：

#parent1{

width: 500px;

height: 300px;

position: relative;

background-color: rgb(46,95,62);

}

#son1{

width: 250px;

height: 150px;

position: absolute;

left: 50%;

top: 50%;

}

#cont1{

width: 100%;

height: 150px;

margin-left: -50%;

margin-top: -75px;

background-color: rgb(23,48,31);

}

优点：兼容性好，代码量少

不足：子元素的宽高需要确定，对于高度自适应的容器会带来问题，建议把盒子设置成box-sizing:border-box

02负位移

基本思路：将设置了绝对定位的子元素水平和垂直偏移50%，然后用transforms属性值将子元素偏移负自身宽高的一半，示意图如下：

代码如下：

#parent2{

width: 500px;

height: 300px;

position: relative;

background-color: rgb(46,95,62);

}

#son2{

width: 250px;

height: 150px;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

background-color: rgb(23,48,31);

}

优点：支持子容器高度自适应；适用于响应式布局环境；移动浏览器支持较好；代码量少

不足：不支持IE8及以西啊浏览器；需要添加浏览器私有前缀；translate可能受transform其他子属性值的影响

03表格块

基本思路：通过display中的table和table-cell属性，模拟表格布局，示意图如下：

代码如下：

#parent3{

width: 500px;

height: 300px;

display: table;

background-color: rgb(46,95,62);

}

#son3{

display: table-cell;

vertical-align: middle;

}

#cont3{

width: 50%;

height: 50%;

margin: auto;

background-color: rgb(23,48,31);

}

优点：支持高度自适应；可适应响应式环境；适用于多个子元素水平垂直居中环境；兼容性好；

不足：需要额外标签

04行内块

基本思路：将子容器和任一伪元素设置为行内块及水平居中，然后对父容器文本居中，示意图如下：

代码如下：

#parent4{

width: 500px;

height: 250px;

text-align: center;

overflow: auto;

background-color: rgb(46,95,62);

}

#parent4:after{

content: '';

display: inline-block;

vertical-align: middle;

height: 100%;

width: 0;

}

#son4{

width: 250px;

height: 150px;

display: inline-block;

vertical-align: middle;

background-color: rgb(23,48,31);

}

优点：支持子元素高度自适应；适应于多个子元素水平垂直居中环境；兼容性良好，IE7及以上支持

不足：当存在多个子容器时，注意盒子之间的间隙

05伸缩盒模型

基本思路：使用flexbox弹性盒模型设置居中，示意图如下：

代码如下：

#parent5{

width: 500px;

height: 300px;

background-color: rgb(46,95,62);

display: flex;

align-items: center;

justify-content: center;

}

#son5{

width: 250px;

height: 150px;

background-color: rgb(23,48,31);

}

优点：不需要设置子元素的宽高；适用于任意子元素水平垂直居中环境；提供更开阔和便捷的布局思想；代码量少；((ฅ>ω

自己比较喜欢的一个方法)

不足：IE10及以上兼容，高级浏览器也部分存在兼容问题；需要添加浏览器私有前缀；可能存在性能问题。

06绝对居中块

基本思路：设置子元素外边距auto及四个方向的偏移值为0做到水平垂直居中，示意图如下：

代码如下：

#parent6{

width: 500px;

height: 300px;

background-color: rgb(46,95,62);

position: absolute;

}

#son6{

width: 50%;

height: 50%;

background-color: rgb(23,48,31);

margin: auto;

position: absolute;

top: 0;

right: 0;

left: 0;

bottom: 0;

}

优点：支持IE8及以上；代码量少，便签结构简单；通过用%设置宽高值实现适用于响应式环境的目的

不足：高度必须定义

07外插入一个空元素&利用浮动

基本思路：

通过定义一个子元素，把它的高定义为50%，宽随意，设置margin-bottom达到绝对居中，示意图如下：

代码如下：

#parent7{

width: 500px;

height: 300px;

background-color: rgb(46,95,62);

}

#content7{

clear: both;

height: 150px;

position: relative;

width: 50%;

margin: auto;

background-color: rgb(23,48,31);

}

#floater{

background-color: #ccc;

float: left;

margin-bottom: -75px;

height: 50%;

width: 50px;

}

优点：使用于大多数浏览器(包括IE8及以上)；没有足够的空间时(如：窗口缩小)，content不会被截断

不足：需要额外的空元素；用到了浮动，容易影响整体布局

主要都是老师的内容照搬照抄，一些地方加入了自己的理解，方便查阅。