CSS-居中方法总结

信手:)

已于 2022-05-17 10:32:38 修改

阅读量587

点赞数

分类专栏：前端文章标签：前端 css3 html5

于 2022-04-21 13:29:38 首次发布

本文链接：https://blog.csdn.net/qq_43681073/article/details/124318692

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

常见CSS居中方法

1. 水平居中
- 1.1 文本级居中
- 1.2 块级居中
2. 垂直居中
- 2.1 文本级居中
- 2.2 块级居中

1. 水平居中

1.1 文本级居中

文本、或具有inline特性的元素，想要使其居中，则设置文本所在容器、或具有inline特性元素的父元素设置如下属性：

元素 { text-align: center; }

实例：

div{
	width: 100px;
	height: 100px;
	border: 5px solid black;
	text-align: center;
}

<div>
	文本居中<br>
	<a href="">标签居中</a>
</div>

在这里插入图片描述

1.2 块级居中

页面原始内容如下：

body {
	/* 为了方便观察，给body设置了边框和内边距 */
	border: 10px solid black;
	padding: 10px;
}
.box {
	/* 需要实现水平居中的盒子 */
	border: 5px solid blue;
	background-color: pink;
	height: 200px;
	width: 200px;
}
.parent {
	/* box的父元素parent，暂不设样式，后续处理水平居中时使用 */
}

<body>
	<b>body</b>
	<div class="parent">
		<div class="box">box</div>
	</div>
</body>

在这里插入图片描述

块元素box实现水平居中，通常有以下几种方式：

使用margin实现水平居中

.box {
	/* 上下外边距为0，左右外边距自动适应 */
	margin: 0 auto;
}

优点：实现简单，兼容性强
缺点：宽度为确定值，扩展性差
在这里插入图片描述

父元素使用 text-align:center，但其实现的是文本级的居中，需要使 box 具有 inline 特性

.son { 
	/* 暂时注释掉宽度，宽度由box中的内容撑起 */
	/* width: 200px; */
	display: inline-block; 
}
.parent { text-align: center; }

优点：扩展性强
缺点：元素具有inline特性后，会产生新的问题——间隙问题，需要另作处理
在这里插入图片描述

浮动元素实现居中，需要其父元素也进行浮动，同时要借助相对定位来实现

/* 先设置parent */
.parent {
	float: left;
	position: relative;
	left: 50%;
}

首先将父元素浮动，设置相对定位 left: 50%，可以看到parent的左侧跟body的中线对齐
在这里插入图片描述

/* 再设置box */
.box {
	float: left;
	position: relative;
	right: 50%;
}

box浮动后，向左移动相对自身当前位置的50%，可达到实现在body中居中的效果
在这里插入图片描述
优点：兼容性强，扩展性强，解决了需要通过宽度设置位置的问题

绝对定位实现居中

.box { 
	position: absolute;
	left: 50%;
	margin-left: -100px;
 }

优点：兼容性强
注意：脱标；需设置宽度，也可以按上边浮动水平居中的方式加以改造，解决固定宽度的问题
在这里插入图片描述

绝对定位 + transform: translate(); (CSS 3)实现

.box {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);//左移自身的50%
}

优点：无需再一层父元素控制
缺点：不向下兼容

css3 flex实现

.parent {
	display: flex;
	justify-content: center;
}

优点：扩展性强
缺点：不向下兼容
在这里插入图片描述

2. 垂直居中

2.1 文本级居中

子元素的line-height = 父元素的height

div{
	height: 100px;
	width: 100px;
	border: 5px solid black;
	line-height: 100px;
}

<div>文本居中</div>

在这里插入图片描述

2.2 块级居中

页面原始内容

.box {
	/* 需要实现水平居中的盒子 */
	border: 5px solid blue;
	background-color: pink;
	height: 200px;
	width: 200px;
}
.parent {
	height: 400px;
	width: 400px;
	border: 5px solid;
}

<div class="parent">
	<div class="box">box</div>
</div>

在这里插入图片描述
块元素box实现垂直居中，通常有以下几种方式：

父元素设置 display: table-cell; vertical-align: middle;

.parent {
	display: table-cell;
	vertical-align: middle;
}

在这里插入图片描述

定位（absolute、relative，top属性根据父元素以及自身高度调整，或使用transform: translate（CSS3）相对自身调整，参考水平居中3、4、5，不推荐）
css3 flex. 父元素设置 display: flex

.parent {
	display: flex;
}

父元素设置为flex后，子元素垂直居中有以下方式

.box {
	margin:auto 0;
}

.box {
	align-self: center;
}

在这里插入图片描述

信手:)

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS-居中方法总结

常见CSS居中方法1. 水平居中1.1 文本级居中1.2 块级居中2. 垂直居中2.1 文本级居中2.2 块级居中1. 水平居中1.1 文本级居中文本、或具有inline特性的元素，想要使其居中，则设置文本所在容器、或具有inline特性元素的父元素设置如下属性：元素 { text-align: center; }实例：div{ width: 100px; height: 100px; border: 5px solid black; text-align: center;}&l
复制链接

扫一扫