版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/shelbyandfxj/article/details/79797042
有如下一个div及其样式:
<style type="text/css">
div {
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
<div id="outer">
</div>
让其居中的方法有:
(1)
#outer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);//定义 2D 转换,沿着 X 和 Y 轴移动元素。
}
(2)
#outer {
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px; //这是元素的宽度的一半
margin-top: -100px;
}
(3)
#outer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto
}
(4)这里是以父子元素来将div居中,将div的父元素定义为flex格局。(同样,当该子元素的宽高不定时也可以使用这种方法来使其垂直居中)
body {
display:flex;
justify-content:center; //定义了主轴方向的对齐方式,这里是居中
align-items:center; //定义了交叉轴方向的对齐方式
}
(5)这种也是以父子元素的方式来定义垂直水平居中的,而且,这里父子元素的宽高要一致。
<style type="text/css">
div {
border: 1px solid red;
width: 200px;
height: 200px;
}
#inner {
margin-left: -50%;
margin-top: -50%;
}
#outer {
position: absolute;
top: 50%;
left: 50%;
}
</style>
<div id="outer">
<div id="inner"></div>
</div>