概述
绝对定位方式：
div{
width: 100px;
height: 100px;
background: green;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
注释：DIV绝对定位，距顶和距左设置为父元素的50%，再把自身宽高的一半加margin负值;
如何居中一个设置了浮动的元素
<style>
.box{
width: 300px;
height: 300px;
border:1px solid black;
/*垂直居中*/
display: table-cell;
vertical-align: middle;
}
.content{
height: 100px;
width: 100px;
border:1px solid red;
/*水平居中，但设置浮动后失效
margin: 0 auto;*/
float: left;
margin-left: 50%;
position: relative;
left: -50px;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
父级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
最后
以上就是笨笨砖头为你收集整理的元素居中的几种实现方式的全部内容，希望文章能够帮你解决元素居中的几种实现方式所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复