<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
a {
width: 200px;
height: 200px;
border: 1px solid red;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div>
<div class="a">
来，互相伤害
</div>
</div>
</body>
</html>
水平居中：
行内元素：可以父级利用text-align: center;进行水平居中
块级元素：
①可以利用margin: 0 auto;进行水平居中
②使用position决定定位
利用margin-left进行左偏移
利用transform进行左偏移
③使用flex布局
垂直居中：
内联元素：可以使用line-height进行垂直居中
块级元素：
①使用position定位
利用margin-top进行上偏移
利用transform进行上偏移
②使用flex布局
常用的基本就这些，当然还有grid布局，父级设置为table布局，进行设置等方案，这边不做过多赘述。
在我还没有成为一名前端工程师之前，在布局页面的时候，让元素水平、垂直居中都是用的浮动或者定位来实现（ps:关于用这些方法实现的水平垂直居中方法也有很多种，有空也总结一下吧）直到有一次跟一个有开发经验的小哥哥聊天，他跟我说他在工作中都只用flex布局了，说我用的那些方法都过时了，这强烈的激起了我想要学习flex布局的热情！想要让元素实现d性布局，只需要要包含容器中（父元素）设置属性display:flex即可，平时工作用的最多的就是水平垂直居中啦，想要让元素水平居中，在容器中设置justify-content:center;而要实现垂直居中则可以设置align-items:center；重点来了，还有另一种奇*技巧可以实现垂直居中，那就是当父元素设置了d性布局并且设置了高度后，只要设置元素的margin:auto就可以实现元素的垂直居中了！原理就是margin:auto就是用来分配元素的剩余空间的，前提是元素在非普通文档流中&&元素要有一个确定的高度&&要有剩余空间！！比如想要让块级元素右对齐，只需设置margin-left:auto即可
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）