方法
第一种通过绝对定位的方式 absolute + 负margin
首先知道子元素的宽高，给子元素设置top：50%；left：50%，
但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值，负的外边距可以让元素向相反方向定位，
通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了
**优点：**比较好理解，兼容性好
**缺点：**需要知道子元素的宽高
第二种：也是通过绝对定位的方式 absolute + margin auto
这个是需要将各个方向的距离都设0，再讲margin设为auto；就行
**优点：**兼容性也很好
**缺点：**需要知道子元素的宽高
第三种：absolute + calc（计算）
这种方法top的百分比是基于元素的左上角，那么在减去宽度与高度的一半就好了
calc:任何长度值都可以使用calc()函数进行计算；
calc()函数使用标准的数学运算优先级规则；
它支持 “+”, “-”, “*”, “/” 运算
也可以查看calc教程：https://www.runoob.com/cssref/func-calc.html
**优点：**他的兼容性依赖的是calc的兼容性
**缺点：**同样是需要知道子元素的宽高
第四种：absolute + transform （过渡）
这个方法不需要子元素固定宽高
修复绝对定位的问题，还可以使用css3新增的transform，transform的translate
属性也可以设置百分比，其是相对于自身的宽和高，所以可以将translate设置为-50%，就可以做到居中了
**优点：**代码量少
**缺点：**IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.
第五种：line-height
只对文本有效果，对定宽高的div是没有用的。所以在文本水平垂直居中时使用。
1
优点：代码简洁
缺点：只对文本有效，只对单行文本有效，多行文本不可以
第六种：writing-mode
可以参考：https://www.runoob.com/cssref/css-pr-writing-mode.html
这种方法稍微有些复杂，writing-mode可以改变文字的显示方向
第七种：table 形式
通过table单元格的形式设
**优点：**tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了
**缺点：**这个不是table的正确方法，不是很建议使用，但是也是可以实现的
第八种：table-cell实现水平垂直居中: table-cell middle center组合使用
直接给父级设
display: table-cell;
vertical-align: middle;
text-align: center;
123
为了可以明显看出，我们可以给它设个宽高与边框
width: 240px;
height: 180px;
border:1px solid #666;
123
第九种：弹性盒子的方式
通过给父元素设置justify-content: center;
align-items: center;就可以了
**优点：**移动端使用灵活自如
**缺点：**pc端需要根据兼容情况来判定
第十种：grid（网格布局）
给父级设display:grid;
给子元素设align-self: center;justify-self: center;
**优点：**代码量少
**缺点：**兼容不如flex，建议用flex
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
----------
提示代码开始
----------
*/
body{
background-color: aquamarine;
}
p {
text-align: center;
}
/*
----------
提示代码结束
----------
*/
/*
----------
公共代码开始
----------
*/
.wp {
/*样式代码(父元素)*/
border: 1px solid #432;
width: 300px;
height: 300px;
margin-bottom: 20px;
border-radius: 16px;
}
.box_fixed_w_h {
/*固定宽高代码(子元素)*/
width: 100px;
height: 100px;
background-color: green;
border-radius: 16px;
text-align: center;
color: antiquewhite;
line-height: 100px;
}
.box_unfixed {
/*不固定宽高代码(子元素)*/
background-color: pink;
border-radius: 16px;
}
/*
----------
公共代码结束
----------
*/
/*
----------
固定宽高的居中
----------
*/
/*
- 方式一:
父元素相对定位,
子元素绝对定位,top与left设置为50%,margin设置为宽度与高度的一半.
达到垂直与平行居中的效果
*/
.wp_1 {
position: relative;
}
.box_1 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
/*
方式二:
父元素相对定位
子元素决定定位,top: 0;bottom: 0;left: 0;right: 0;margin: auto;
此时margin:auto; 等于 margin:auto auto;
margin:auto.浏览器会自动选择一个合适的margin来应用。它可以用于将一个块居中。--MDN
*/
.wp_2 {
position: relative;
}
.box_2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*
方式三:可以认为是第一种方式的简写:
calc(50% - 50px);中的50%是相当于父元素的50% 减去 50px(子元素的一半)
top:calc(50% -50px); 等于
top:50%;margin-top:-50px;
*/
.wp_3 {
position: relative;
}
.box_3 {
position: absolute;
top: calc(50% - 50px);
/*百分比以父元素为标准*/
/*
css中calc(100%-10px)这个calc的百分比参考的什么？
https://segmentfault.com/q/1010000021603224
*/
left: calc(50% - 50px);
}
/*
----------
固定宽高的居中
----------
*/
/*
第四种:
父元素相对定位,
子元素绝对定位,top与left设置为50%,
transform:translate(-50%,-50%)中设置的百分比是依据子元素的单位长度进行取值的.
*/
.wp_4 {
position: relative;
}
.box_4 {
position: absolute;
/*设置为绝对定位之后,html元素会自动失去宽高*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*
第五种:
利用行内元素居中属性也做到水平垂直居中
*/
.wp_5 {
line-height: 300px;/*通过设置行高与高度一样,达到行内元素的垂直居中*/
text-align: center;/*这一行设置为行内元素水平居中*/
font-size: 0px;/*设置font-size=0,使得vertical-align对齐基线居中
了解更多参看链接:https://www.zhangxinxu.com/wordpress/?s=vertical-align
*/
}
.box_5 {
font-size: 16px; /*重新设置font-size*/
display: inline-block; /*设置为行内元素*/
vertical-align: middle;/*行内元素垂直对齐*/
line-height: initial;/*行高继承父元素*/
text-align: left;/*重新设置文字左侧显示*/
}
/*
第六种:
有点绕.并增加了一个无意义的html标签.直接放弃.
如有需要:参考原链接:https://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/
*/
.wp_6 {
writing-mode: vertical-lr;/*修改文字排序为上线*/
text-align: center;/*文字居中.*/
}
.wp_6_inner {
writing-mode: horizontal-tb;/*修正文字显示方式*/
display: inline-block;/*设置为行内元素*/
width: 100%;
}
.box_6 {
display: inline-block;
margin: auto;
text-align: left;
}
/*
第七种:
增加无意义的标签.
tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了
*/
.wp_7 {
text-align: center;
}
.box_7 {
display: inline-block;
}
/*
第八种:
css新增的table属性，可以让我们把普通元素，
变为table元素的效果(元素垂直居)，通过这个特性也可以实现水平垂直居中.
*/
.wp_8 {
display:table-cell;
vertical-align: middle;
text-align: center;
}
.box_8 {
display: inline-block;
}
/*
第九种:
使用flex布局
*/
.wp_9 {
display: flex;
justify-content: center;
align-items: center;
}
/*
第十种:
grid布局
*/
.wp_10 {
display: grid;
}
.box_10 {
align-self: center;
justify-self: center;
}
</style>
</head>
<body>
<p>仅居中元素,定宽高</p>
<div class="wp wp_1">
<div class="box_fixed_w_h box_1">你好 :)</div>
</div>
<div class="wp wp_2">
<div class="box_fixed_w_h box_2">你好 :)</div>
</div>
<div class="wp wp_3">
<div class="box_fixed_w_h box_3">你好 :)</div>
</div>
<hr>
<p>居中元素,不定宽高</p>
<div class="wp wp_4">
<div class="box_unfixed box_4">你好 :)</div>
</div>
<div class="wp wp_5">
<div class="box_unfixed box_5">你好 :)</div>
</div>
<div class="wp wp_6">
<div class="wp_6_inner">
<div class="box_unfixed box_6">你好 :)</div>
</div>
</div>
<table>
<tbody>
<tr>
<td class="wp wp_7">
<div class="box_unfixed box_7">123123</div>
</td>
</tr>
</tbody>
</table>
<div class="wp wp_8">x
<div class="box_unfixed box_8">你好 :)</div>
</div>
<div class="wp wp_9">
<div class="box_unfixed box_9">你好 :)</div>
</div>
<div class="wp wp_10">
<div class="box_unfixed box_10">123123</div>
</div>
</body>
</html>
拓展补充
vertical-align ：https://www.zhangxinxu.com/wordpress/?s=vertical-align
CSS实现水平垂直居中的10种方式 ：https://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/
扫一扫
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
