flex vue 垂直居中居上_布局篇--居中
一、元素内部文字居中：想要元素内部的文字居中，首先该元素要可以设置宽高，即为块状元素（div）或行内块元素，如果元素为行内元素（span），可通过display：block/inline-block设置为块状元素或行内块；1、单行文本居中：水平居中：text-align: center;垂直居中：height: 100px;line-heig...
一、元素内部文字居中：
想要元素内部的文字居中，首先该元素要可以设置宽高，即为块状元素（div）或行内块元素，如果元素为行内元素（span），可通过display：block/inline-block设置为块状元素或行内块；
1、单行文本居中：
水平居中：text-align: center;
垂直居中：height: 100px; line-height: 100px;
2、多行文本居中：
水平居中：通过设置左右padding相等来实现；
垂直居中：通过设置上下padding相等来实现；
注：该方法涉及到盒模型，如果元素自身未设置高度，高度由内容撑开，则需为box-sizing：content-box；如果元素自身设置了高度，则需为box-sizing：border-box；因为不同浏览器box-sizing默认的值不一致，故如果出现未水平或垂直居中，可通过设置该属性实现最终效果。
3、模拟table的属性实现文本居中：
该方法需要在元素外部包裹一个父级块状元素，此时父元素宽高固定，子元素未设置宽高，继承父元素的宽高，使用vertical-align：middle实现文本垂直居中，text-align：center实现水平居中；（兼容性：在IE8及以上版本使用，在IE7及以下的版本并不能很好的支持display:table和display:table-cell属性；）
<body>
<div id="div1">
<div class="inner">
这是多行文本垂直居中，
</div>
</div>
</body>
<style>
#div1{
display: table;
width: 400px;
height: 200px;
border: 1px solid red;
}
.inner{
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px solid blue;
}
</style>4、元素本身居中：
因为没有父元素，父元素默认为body，body宽度默认是100%；故可通过左右margin为auto来实现水平居中，通过设置上下margin为具体值，实现垂直方向的位置变动。（父元素为body，设置上下margin为auto无效）
二、元素内部的元素居中：
外部元素必须为块状元素或行内块且宽高固定；内部元素可为块状元素，也可为行内元素，视情况而sing；
1、内部元素为行内元素，相当于内部是文本，参考文本居中的设置；也可以将行内元素通过display：block/inline-block设置成块状元素/行内块元素，然后使用对应的方法。
2、内部元素为块状元素或行内块：
（1）使用position定位：
子div固定大小，设定水平和垂直偏移父元素的50%，这时子元素的左上角在父元素的中心点，将子元素外边距向上和向左挪回自身的一半大小，即可实现子元素的中心点与父元素的中心点重合，达到居中的效果；该方法兼容IE7、IE6；
<body>
<div id="div1">
<div class="inner">
...
</div>
</div>
</body>
<style>
#div1{
position: relative;
width: 500px;
height: 500px;
background-color: coral;
}
.inner{
position: absolute;
background-color: darkcyan;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
}
</style> （2）使用position定位，利用空间的拉扯制衡实现：
子div宽高固定，设置上下左右的距离均为0，margin为auto，通过拉扯实现居中；该方法不兼容IE7、IE6
<body>
<div id="div1">
<div class="inner">
我是谁？我在那儿？
</div>
</div>
</body>
<style>
#div1{
position: relative;
width: 500px;
height: 500px;
background-color: coral;
}
.inner{
position: absolute;
background-color: darkcyan;
width: 300px;
height: 200px;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
</style>（3）利用css3的新属性transform实现；
同方法（1）的原理，首先利用top：50%，left：50%使子div的左上角位于父元素的中心点，在使用css3的新属性transform：translate来实现子div相对于父元素的位移；此方法不要求子元素的宽高固定（IE9之前的版本不支持。）
<body>
<div id="div1">
<div class="inner">
我是谁？我在那儿？
</div>
</div>
</body>
<style>
#div1{
position: relative;
width: 500px;
height: 500px;
background-color: coral;
}
.inner{
position: absolute;
background-color: darkcyan;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%); /*缩写：translate(-50%,-50%) */
}
</style>（4）利用flex布局
此方法不要求子元素的宽高固定，E9及以下IE浏览器版本都不支持；
<body>
<div id="div1">
<div class="inner">
我是谁？我在那儿？
</div>
</div>
</body>
<style>
#div1{
display: flex;
align-items: center;/*如果flex-direction：row；代表垂直居中 ；如果flex-direction：column；则代表水平居中*/
justify-content: center;/*如果flex-direction：row；代表水平居中；如果flex-direction：column；则代表垂直居中*/
background-color: coral;
width: 500px;
height: 500px;
}
.inner{
background-color: darkcyan;
}
</style> （5）模拟table的属性
将父元素定义成display：table-cell，模拟表格的样式，父元素设置vertical-align：middle可实现子元素垂直居中；固定子元素的宽度，通过设置子元素的左右外边距为auto，实现水平居中，对子元素的高度不做要求；不能兼容IE7、IE6
<body>
<div id="div1">
<div class="inner">
我是谁？我在那儿？
</div>
</div>
</body>
<style>
#div1{
display: table-cell;
vertical-align: middle;
background-color: coral;
width: 500px;
height: 500px;
}
.inner{
background-color: darkcyan;
width: 100px;
margin: 0 auto;
}
</style>以上是我整理的一些居中布局的方法，作为学习笔记，欢迎大家指正补充。
参考文档：https://blog.csdn.net/u014607184/article/details/51820508
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)