水平、垂直居中

最新推荐文章于 2022-07-19 22:13:37 发布

sliiva

最新推荐文章于 2022-07-19 22:13:37 发布

阅读量239

点赞数

分类专栏：关于CSS 文章标签： CSS布局水平垂直居中前端

本文链接：https://blog.csdn.net/lncci/article/details/79998503

版权

关于CSS 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1、所有行内元素、行内块元素、块级元素的水平居中，可以设置它们的父元素：text-align：center，这种做法可以不设置子元素的宽度。代码如下：

<body text-align=“center”>
	    <div id='parents'>text</div>
	    <input type="text">
	    <span>texttt</span>
</body>

2、水平居中----块级元素：在设置了块级元素的宽度的前提下，给块级元素设置属性：margin：0 auto；（仅块级元素）

3、垂直居中----所有元素：在已知父元素的高度的前提下，设置父元素的属性：line-height：父元素的高度值；

4、垂直居中----块级元素（div）：（1）利用定位的方法：设置父元素为相对定位，自己为绝对定位margin调整或transfrom:translate（）；（2）display：flex；justify-content:center;align-items:center;

一个例子：

<style>
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;//本来定位点为左上角，所以要实现真正的垂直居中还需要将元素向左上移动自己宽高的一半
}
</style>
<body>
<div id="parent">
<div id="child">Content here</div>
</div>
</body>

5、 垂直居中----所有元素：设置父元素的属性：display：table 自己的属性设置为：display：table-cell;vertical-align:middle;（这种方法也必须设置父元素的高度才有作用）