10个CSS办法实现元素水平垂直居中 元素不定宽高居中办法
<h2 style="color: black; text-align: left; margin-bottom: 10px;">背景</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在<span style="color: black;">研发</span>中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是<span style="color: black;">照片</span>或其他元素</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">居中是一个非常<span style="color: black;">基本</span>但又是非常<span style="color: black;">要紧</span>的应用场景，实现居中的<span style="color: black;">办法</span>存在<span style="color: black;">非常多</span>，<span style="color: black;">能够</span>将这些<span style="color: black;">办法</span>分成两个大类：</p>居中元素（子元素）的宽高已知居中元素宽高未知<h2 style="color: black; text-align: left; margin-bottom: 10px;">实现方式</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以下是10种实现元素水平垂直居中的方式：</p>text-align:center 块状元素，水平居中(只适用于块级元素,块级元素内的行内元素<span style="color: black;">能够</span>居中<span style="color: black;">或</span>将此行内元素设置为块级元素)margin:0 auto 水平居中 以外边框为参照物，上下外边框距为0，<span style="color: black;">上下</span>外边框距浏览器会自动计算平分line-height 垂直居中 <span style="color: black;">经过</span>设置行间距。line-height只适用于单行文本的元素，多行元素不适用。float属性+relative定位 给父元素设置float：left ,<span style="color: black;">而后</span>父元素整体向左移动50%（position:relative;left:50%），<span style="color: black;">此时</span>父元素要清除浮动（clear：both）,<span style="color: black;">而后</span>再给子元素整体向左移动50%(position:relative;left:-50%)<span style="color: black;">按照</span>绝对定位absolute+margin实现水平居中 给父元素一个相对定位relative，利用绝对定位absolute，<span style="color: black;">协同</span>margin：auto自动计算外边距（position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;）。相<span style="color: black;">针对</span>相对应于relative的绝对定位absolute，<span style="color: black;">必须</span>定宽。relative只是为了给子元素定位用的<span style="color: black;">运用</span>absolute绝对定位+translate 移动转换，实现水平垂直居中 <span style="color: black;">运用</span>百分比来绝对定位一个元素，并<span style="color: black;">协同</span><span style="color: black;">运用</span>translate，将元素移动定位居中（position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)）。利用table布局，默认垂直居中（vertical-align:middle） <span style="color: black;">倘若</span>不是table布局的话<span style="color: black;">能够</span>：仿table（display：table-cell）,<span style="color: black;">同样</span><span style="color: black;">运用</span>vertical-align:middle实现居中对齐flex布局 父元素<span style="color: black;">运用</span>display：flex,设置其属性justify-content.align-items都为center(display: flex; justify-content: center; align-items: center),实现水平居中flex布局+margin 父元素<span style="color: black;">运用</span>flex布局（display：flex）,子元素<span style="color: black;">运用</span>margin：auto利用定位+margin:负值grid布局<h2 style="color: black; text-align: left; margin-bottom: 10px;">绝对定位+transform:translate(-50%,-50%)</h2>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
position:relative;
}
.son{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">行内元素</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">基本思想：单行文本子元素line-height 值为父元素 height 值</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
height: 200px;
}
.son {
line-height: 200px;
}</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">行内块级元素</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">基本思想：元素是行内块级，<span style="color: black;">运用</span>display: inline-block, vertical-align: middle+伪元素<span style="color: black;">处在</span>容器中央</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent::after, .son{
display:inline-block;
vertical-align:middle;
}
.parent::after{
content:;
height:100%;
}</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">利用定位+margin:auto</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">先上代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><st</div>
你的留言真是温暖如春，让我感受到了无尽的支持与鼓励。 感谢楼主的分享！我学到了很多。 “BS”（鄙视的缩写） 这夸赞甜到心里，让我感觉温暖无比。 我完全同意你的看法，期待我们能深入探讨这个问题。 楼主听话，多发外链好处多，快到碗里来！外链论坛 http://www.fok120.com/
页:
[1]