CSS|CSS 垂直居中 CSS垂直居中

一. 水平居中 1. 行内元素水平居中
父元素设置

text-align:center;

文章图片
2. 块级元素水平居中
元素自身加

margin: auto;

.parent{ border: 2px solid #66FFFF ; text-align: center; } p{ border: 2px solid #999; } .son{ border: 2px solid #777; width: 100px; height: 50px; margin: 0auto; }13131311313133 son

文章图片
二. 垂直居中 1. Flex 垂直居中
只需要父元素加

display: flex; justify-content:center ; align-items: center;

【CSS|CSS 垂直居中】示例：

body{ height: 100vh; } .parent{ border: 2px solid #66ffff; height: 200px; display: flex; justify-content:center ; align-items: center; } .son{ width: 200px; height: 100px; border: 2px solid #333; } p{ text-align:center; word-break: break-all; }13131333131131222222222223333333333333

预览地址

文章图片

文字垂直居中
预览链接

文章图片

用 Flex 来做居中的话，我只要先指定容器为一个 Flex 容器，然后 justify-content 让他水平方向居中，再 align-items 让他垂直方向居中。我可以很简单很优雅的就做到居中。

2. position 垂直居中
①. 不知父元素宽高 (通用方法) 父元素(宽高未知)

position:relative;

子元素(宽高未知)

position: absolute; left:50%; top:50%; transform:translate(-50%,-50%)

示例：

body{ height: 100vh; } .parent{ position:relative; border:2px solid #66ffff ; height: 30%; } .son{ width: 50%; height: 50%; border: 2px solid #333; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%) } p{ text-align: center; word-break: break-all; }position 通用垂直居中

预览地址

文章图片

①. 已知父元素宽高利用margin代替transform来居中
css如下

.parent{ position:relative; border:2px solid #66ffff ; width: 300px; height: 150px; } .son{ width: 200px; height: 100px; border: 2px solid #333; position: absolute; top:0; left: 0; margin-left:25px ; margin-top:50px; }

文章图片
position缺点：少了变化，不利于响应式布局。目前对我来说，position用的最少。
3. Float 垂直居中

.parent{ border:2px solid #66ffff ; width: 400px; height: 200px; } .son{ width: 200px; height: 100px; border: 2px solid #333; float:right; margin-top:50px; margin-right:100px; } .clearfix::after{ content:''; display:block; clear :both; } p{ text-align: center; word-break: break-all; }float垂直居中

预览链接

文章图片

4. margin 垂直居中

body{ height: 100vh; } .parent{ border:2px solid #66ffff ; width: 400px; height: 200px; } .son{ width: 200px; height: 100px; border: 2px solid #333; margin:50px auto; } p{ text-align: center; word-break: break-all; }

预览链接

文章图片

5. 文字的垂直居中
line-height+ padding 子元素line-height + padding-top +padding-bottom = 父元素height

.parent{ border:2px solid #66ffff ; height: 100px; } p{ margin:0; line-height:60px; padding:20px 0; text-align: center; word-break: break-all; border: 2px solid #333; }

预览链接