首页 > 开发 > CSS > 正文

浅析CSS实现水平垂直同时居中的5种思路

2024-07-11 08:33:04

字体：大中小

来源：转载

供稿：网友

水平居中和垂直居中已经单独介绍过，本文将介绍水平垂直同时居中的5种思路

思路一： text-align + line-height实现单行文本水平垂直居中

CSS Code复制内容到剪贴板

<style> .test{
text-align: center; line-height: 100px;
} </style>

XML/HTML Code复制内容到剪贴板

<div class="test" style="background-color: lightblue;width: 200px;">测试文字</div>

思路二： text-align + vertical-align

【1】在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素

[注意]若兼容IE7-浏览器，将结构改为<table>结构来实现table-cell的效果；用display:inline;zoom:1;来实现inline-block的效果

CSS Code复制内容到剪贴板

<style> .parent{
display: table-cell; text-align: center;
vertical-align: middle; }
.child{ display: inline-block;
} </style>

XML/HTML Code复制内容到剪贴板

<div class="parent" style="background-color: gray; width:200px; height:100px;"> <div class="child" style="background-color: lightblue;">测试文字</div>
</div>

【2】若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle

CSS Code复制内容到剪贴板

<style> .parent{
text-align: center; line-height: 100px;
font-size: 0; }
.child{ vertical-align: middle;

上一篇：img图片下面莫名的出现下边距的快速解决方法推荐

下一篇：CSS3近阶段篇之酷炫的3D旋转透视

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注