常见的几种居中方式

最新推荐文章于 2022-03-24 21:19:42 发布

Fade Away

最新推荐文章于 2022-03-24 21:19:42 发布

阅读量382

点赞数

分类专栏：对齐方式

本文链接：https://blog.csdn.net/qq_26239917/article/details/89139202

版权

对齐方式专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.单行文本的居中[inline]

text-align:center line-height = 容器高度

2.父容器包含单个行内块级元素[inline-block]

父元素

    text-align: center;
    line-height: 160px;
    font-size: 0;

子元素

    vertical-align: middle;
    //与父元素对齐

vertical-align回顾
middle是对齐父元素的 middle-line

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

3.弹性盒子[任何元素]

父元素

.b {
    display: flex;
    justify-content: center;
    align-items: center;
}

无需设置子元素样式[前提子元素有生效的宽高属性]

4.定位方式一[ lbtr + margin auto]【任何元素】

可以设置父元素为relative,，fixed,absolute也可以
子元素

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

5.定位方式二[left top + translate]【任何元素】，有个变体使用margin 负数

translate里面的值是需要加 , 分隔的
可以设置父元素为relative,fixed,absolute也可以
子元素

position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

6定位方式二[left top + margin] 使用margin 负数

translate里面的值是需要加 , 分隔的
可以设置父元素为relative,fixed,absolute也可以
子元素

position: absolute;
    left: 50%;
    top: 50%;
   margin-left:-自身宽度一半
   margin-right:-自身高度一半

7.使用table【inline inline-block】

tabell cell 相当于tr
table + tabel cell + ele

table

会作为块级表格来显示（类似）

table-row

浏览器会默认创建一个表格行（类似

table-cell

作为一个表格单元格显示（类似

和

）

设置tabel-cell之后需要设置对齐方式 vertical-align
table 元素设置 text-align : center

<div class="f">
		<span>
			<img src="../images/case_03.png" alt="">
		</span>
	</div>

8.[块级元素后面有默认的空白文本节点]利用空白文本节点[inline-block inline]

父元素：
line-height: 300px;
text-align: center;
子元素:
vertical-align: middle;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 300px;
				height: 300px;
				background-color: salmon;
				line-height: 300px;
				text-align: center;
			}
			.box2{
				width: 100px;
				height: 100px;
				vertical-align: middle;
				background-color: skyblue;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class="box"><div class="box2"></div>
		</div>
	</body>
</html>