css里上下居中如何实现?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
css里上下居中也就是垂直居中,css中按元素可以分为三种垂直居中方式,分别是单行的行内元素,多行的行内元素以及块元素的垂直居中. .
<强>
只需要设置单行行内元素的“行高等于盒子的高“即可。
& lt; style>
#父亲{
宽度:500 px;
身高:300 px;
背景颜色:天蓝色;
}
#{儿子
背景颜色:绿色;
身高:300 px;
}
& lt;/style>
& lt; div id=癴ather"祝辞
& lt;跨度id=皊on"在我是单行的行内元素& lt;/span>
& lt;/div> 效果:
使用给父元素设置显示:表格单元;和vertical-align:中间;即可。
& lt; style>
#父亲{
宽度:500 px;
身高:300 px;
背景颜色:天蓝色;
显示:表格单元;
vertical-align:中间;
}
#{儿子
背景颜色:绿色;
}
& lt;/style>
& lt; div id=癴ather"祝辞 & lt;跨度id=皊on"在我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素& lt;/span>
& lt;/div>
效果:
<强>
首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的:50%,即让子元素的左上角垂直居中;
定高度:设置绝对子元素的margin-top:——元素高度的一半px;或者设置变换:translateY (-50%);
& lt; style>
#父亲{
宽度:500 px;
身高:300 px;
背景颜色:天蓝色;
位置:相对;
}
#{儿子
身高:100 px;
背景颜色:绿色;
位置:绝对的;
上图:50%;
margin-top: -50 px;
}
& lt;/style>
& lt; div id=癴ather"祝辞
& lt; div id=皊on"在我是块级元素& lt;/div>
& lt;/div> 不定高度:利用css3新增属性变换:translateY (-50%);
& lt; style>
#父亲{
宽度:500 px;
身高:300 px;
背景颜色:天蓝色;
位置:相对;
}
#{儿子
宽度:100 px;
背景颜色:绿色;
位置:绝对的;
左:50%;
变换:translateY (-50%);
}
& lt;/style>
& lt; div id=癴ather"祝辞
& lt; div id=皊on"在我是块级元素& lt;/div>
& lt;/div> 效果:
使用flexbox布的局,只需要给待处理的块状元素的父元素添加属性显示:flex;对齐项目:中心;
& lt; style>
#父亲{
宽度:500 px;
身高:300 px;
背景颜色:天蓝色;
显示:flex;
对齐项目:中心;
}
#{儿子
宽度:100 px;
身高:100 px;
背景颜色:绿色;
}
& lt;/style>
& lt; div id=癴ather"祝辞
& lt; div id=皊on"在我是块级元素& lt;/div>
& lt;/div> 效果:
感谢各位的阅读!看完上述内容,你们对css里上下居中如何实现大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
