& lt; ! DOCTYPE html>
& lt; html>
& lt;才能style>
,,,*,{
,,,,,填充:,0;
,,,,,保证金:,0;
,,,}
,,,div {
,,,,,身高:,60 px;
,,,,,背景颜色:,# 1888 fa;
,,,,,颜色:,白色;
,,,}
,,,span {
,,,,,行高:,60 px;/*,设置一个大的行高,让它等于理想的容器高度。
,,,,,这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素,可以设置为inline-block只*/,,,}
& lt;才能/style>
& lt;才能body>
,,,& lt; div>
,,,,,& lt; span>测试& lt;/span>
,,,& lt;/div>
& lt;才能/body>
& lt;/html> <强> 2。容器自然高度
CSS中最简单的垂直居中方法是给容器相等的上下内边距,让容器和内容自行决定自己的高度。看下面的例子,通过设置<代码> padding-top 和<代码> padding-bottom> & lt; ! DOCTYPE html>
& lt; html>
,,& lt; style>
,,,,,*,{
,,,,,,,填充:,0;
,,,,,,,保证金:,0;
,,,,,}
,,,,,div {
,,,,,,,padding-top:, 20 px;,,
,,,,,,,padding-bottom:, 20 px;
,,,,,,,背景颜色:,# 1888 fa;
,,,,,,,颜色:,白色;
,,,,,}
,,,& lt;/style>
,,,& lt; body>
,,,,,& lt; div>
,,,,,,,,& lt; span>测试& lt;/span>
,,,,,& lt;/div>
,,,& lt;/body>
& lt;/html> <强> 3。使用FlexBox
& lt; ! DOCTYPE html>
& lt; html>
& lt;才能style>
,,,*,{
,,,,,填充:,0;
,,,,,保证金:,0;
,,,}
,,,div {
,,,,,身高:,60 px;
,,,,,显示:,flex;
,,,,,对齐项目:,中心;
,,,,,justify-content:,中心;
,,,,,背景颜色:,# 1888 fa;
,,,,,颜色:,白色;
,,,}
& lt;才能/style>
& lt;才能body>
,,,& lt; div>
,,,,,& lt; span>测试& lt;/span>
,,,& lt;/div>
& lt;才能/body>
& lt;/html> 关于怎么在CSS中设置元素垂直居中就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
