元素居中的几种实现方式

最新推荐文章于 2023-10-26 15:59:50 发布

转载最新推荐文章于 2023-10-26 15:59:50 发布 · 339 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiadengqi/p/9753012.html

绝对定位方式：
div{
width: 100px;
height: 100px;
background: green;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}

注释：DIV绝对定位，距顶和距左设置为父元素的50%，再把自身宽高的一半加margin负值;

如何居中一个设置了浮动的元素

父级display:table和子级display:table-cell让元素居中

一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字垂直居中的。虽然感觉用的不多，但是在某些时候还是挺管用的

<style>

.parent{
width: 300px;
height: 300px;
display: table;
text-align: center;
}
.child{
height: 200px;
background: yellow;
display: table-cell;
vertical-align: middle;
}

</style>

<body>

<div class="parent">
<p class="child">记者从国家税务总局获悉，10月2日，国家税务总局下发通知，部署开展规范影视行业税收秩序工作。根据中央宣传部等五部门关于对影视行业有关问题开展治理的部署安排，针对近期查处的影视行业高收入从业人员偷逃税等问题，国家税务总局要求各地税务机关在前期工作的基础上，按照稳妥推进、分步实施的原则，开展规范影视行业税收秩序工作，促进影视行业健康发展。
</p>
</div>

</body>

转载于:https://www.cnblogs.com/xiadengqi/p/9753012.html