水平垂直居中

水平居中
水平垂直居中--flex布局
margin + position:absolute布局
transform + absolute
absolute + margin负值
absolute + calc
line-height + vertical-align

水平居中

使用CSS控制水平居中：

块级元素设置width,并设置margin auto
内联元素父元素设置text-align center

块级元素水平居中

关键属性：margin: 0 auto

<style>
.container{width: 300px;height: 300px;border: 2px solid black;
}
.little{width: 200px;margin:  0 auto;border: 2px solid red;
}
</style>
<div class="container"><div class="little">这是块级元素水平居中哦</div>
</div>

效果：

内联元素水平居中
关键属性：text-align: center display: inline-block

<style>.container{width: 300px;height: 300px;border: 2px solid black;text-align: center;}.little{width: 200px;display: inline-block;border: 2px solid red;}
</style>
<div class="container"><span class="little">这是内联元素水平居中哦</span>
</div>

效果：

水平垂直居中–flex布局

flex布局

关键属性：

垂直居中直接设置父元素的CSS样式：

display: flex
align-items: center

水平居中：

display: flex
justify-content: center

同时要水平垂直居中，同时设置即可

需要注意的是IE10+才支持，webkit前缀浏览器设置flex属性需要加webkit。

<style>.container{width: 300px;height: 300px;border: 2px solid black;display: flex;align-items: center;justify-content: center;}.little{width: 200px;display: inline-block;border: 2px solid red;}
</style>
<div class="container"><div class="little">这是水平垂直居中哦</div>
</div>

效果：

margin + position:absolute布局

position: absolute布局的元素，通过设置top/bottom, left/right这两对属性，可以让元素在垂直方向和水平方向分别具有了自适应的特性。

<style>.container{width: 300px;height: 300px;border: 2px solid black;position: relative;}.little{width: 200px;height: 200px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;border: 2px solid red;}
</style>
<div class="container"><div class="little">这是水平垂直居中哦</div>
</div>

效果：

transform + absolute

absolute定位元素的left、top属性是子元素的左边界、上边界相对父元素进行定位；
transform是CSS3中非常强大的一个属性，可以接收多个属性值，包括旋转、缩放、平移等多种功能。

将二者配合，先将子元素左上定点定位到父元素中心点，再使用transform将子元素中心点移动到父元素的中心点即可：

<style>.container{width: 300px;height: 300px;border: 2px solid black;position: relative;}.little{width: 200px;height: 200px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);border: 2px solid red;}
</style>
<div class="container"><div class="little">这是另另一种水平垂直居中哦</div>
</div>

效果：

absolute + margin负值

这与上一种方法类似，上一种方法是使用transform将元素向左上平移，本方法则是使用margin负值的方式将元素拉向左上角

<style>.container{width: 300px;height: 300px;border: 2px solid black;position: relative;}.little{width: 200px;height: 100px;position: absolute;left: 50%;top: 50%;margin-top: -50px;margin-left: -100px;border: 2px solid red;}
</style>
<div class="container"><div class="little">这是另另另一种水平垂直居中哦</div>
</div>

效果：

absolute + calc

calc函数可以计算出正确的left和top值

<style>.container{width: 300px;height: 300px;border: 2px solid red;text-align: center;position: relative;}.little{width: 200px;height: 100px;position: absolute;left: calc(50% - 100px);top: calc(50% - 50px);border: 2px solid green;}
</style>
<div class="container"><div class="little">这是另另另另一种水平垂直居中哦</div>
</div>

效果：

line-height + vertical-align

vertical-align是一个作用于内联元素的属性。内联元素的特性是会和其它内联元素或者文字在同一行显示，但是默认情况下是与父元素“基线对齐”的。

这里的的基线指的是父元素每一行中的一个垂直位置，是英文ｘ下边缘所在的水平, 通过设置vertical-align为middle可以将内联元素的中部对齐父元素的中部（基线+字母ｘ的一半高度）。

所以可以利用这一点，将父元素的行高设置为其自身高度，然后将子元素与父元素中线对齐，即可实现垂直居中。

<style>.container{width: 300px;height: 300px;border: 2px solid red;text-align: center;line-height: 300px;}.little{width: 200px;height: 100px;display: inline-block;line-height: 1.5;vertical-align: middle;border: 2px solid green;}
</style>
<div class="container"><div class="little">这是另另另另另一种水平垂直居中哦</div>
</div>

效果:

CSS中让元素水平垂直居中的6种写法相关推荐

文字居中、CSS中实现盒子水平垂直居中的方法
1. 文字居中: 第一种方式: 当用text-align:center时,达到的是水平居中的效果,那再用vertical-align:middle:其实是实现不了垂直居中的,此时就需要用到displa ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
js、css分别实现元素水平垂直居中
js实现元素水平垂直居中.css实现元素水平垂直居中 css实现元素水平垂直居中[4行代码] js实现元素水平垂直居中[弄巧成拙] css实现元素水平垂直居中[4行代码] #div{top:50%;l ...
元素水平垂直居中的几种常用方法
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>元素水 ...
CSS让一个元素水平垂直居中，到底有多少种方案？
CSS水平垂直居中的方案水平居中对于行内元素: text-align: center; 对于确定宽度的块级元素: (1)width和margin实现.margin: 0 auto; (2)绝对定位 ...
利用flex实现元素水平垂直居中
首先介绍一下flex布局. 采用Flex布局的元素,称为Flex容器(flex container),简称"容器".它的所有子元素自动成为容器成员,成为flex项目(flex it ...
CSS中实现div元素水平垂直居中
常用7种实现水平垂直居中方法: 1.行内元素水平垂直居中 2.绝对定位 + margin 3.绝对定位+margin:auto 4.绝对定位 + translate 5.flex 布局 6.flex+ ...
CSS块元素水平垂直居中的实现技巧
针对之前遇到过的一些特殊样式的实现,我今天做个总结,目的有二:一是将这些方法记录下来,以便将来需要用到时查找使用.二为将这些大神们智慧的结晶发扬光大,让广大前端程序猿们能够少走弯路.此贴为更新帖,以后 ...
CSS Transform让百分比宽高布局元素水平垂直居中
CSS Transform让百分比宽高布局元素水平垂直居中很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高 ...

CSS中让元素水平垂直居中的6种写法