一水平居中

1 行内元素水平居中

行内元素一般是文本，图标等，text-align可以控制其相对于父元素水平居中对齐

#parent{text-align: center;
}

2 margin 自动水平居中

单个块级元素，可以使用margin auto可自动左右对齐，不过要首先设定宽度

#son{width: 100px; /*必须定宽*/margin: 0 auto;
}

另外还可以通过设置父子宽度，使用具体的margin绝对定位对齐

3 块级改行内块级水平居中

多个块级元素时，父元素使用text-align居中对齐，子元素使用inline-block改为行内块级元素即可

#parent{text-align: center;
}
.son{display: inline-block; /*改为行内或者行内块级形式，以达到text-align对其生效*/
}

4 flex布局水平居中对齐

flex布局中主轴为横轴，交叉轴为数轴，在父元素调整子元素沿主轴居中对齐，即可让子元素水平居中对齐

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

二垂直居中

1 line-height垂直居中

可以通过设置height和line-height一致，使元素垂直居中对齐。height为该元素自身的高度，比如div img等的元素高度；line-height为行高的意思，绝定了元素中文本内容的高度。
line-height 可以通过百分比设置行高，以下为默认和70% 200%的效果。

height>line-height时，元素会偏向上，
height<line-height时，元素会偏向下，
height = line-height时，正好垂直居中。

#parent{height: 150px;line-height: 150px;  /*与height等值*/
}

可用于单行元素和多行元素

2 vertical-align垂直居中

针对行内元素和图片，进行垂直居中

#son{vertical-align: middle;
}

3 flex垂直居中

3.1 父元素设置flex，使用align-items让子元素沿交叉轴对齐，即垂直居中

#parent{display: flex;align-items: center;
}

3.2 子元素调整自己的位置，垂直居中对齐

#parent{display: flex;}
#son{align-self: center;}

3.3 margin auto的方法在flex布局平方自动平分剩余空间，达到垂直居中的效果

#parent{display: flex;}
#son{margin: auto 0;}

三水平垂直居中

1 最好用最容易理解功能最强的还是flex布局

#parent{display: flex;
}
#son{margin: auto;
}或#parent{display: flex;justify-content: center;  //水平居中，沿主轴方向，主轴横向align-items: center;  //垂直居中，沿垂直主轴方向
}或#parent{display: flex;justify-content: center;
}
#son{align-self: center;
}

2 父相子绝

.far{position: relative;    //父元素允许相对定位
}

子元素有三种写法：

2.1 要知道子元素宽高，利用宽高一半偏移

.box{width: 100px;height: 50px;position: absolute;
}

2.2 不知道子元素宽高元素，transform偏移，但注意会影响其他元素的fixed定位等问题

.box{position: absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}

2.2 不知道子元素宽高元素,margin:auto
.box{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}

CSS 常见布局水平垂直居中对齐相关推荐

CSS实现元素水平垂直居中的各种方法
关于 CSS 如何将元素进行水平垂直居中的几种常用方法前言在设计网页页面的过程中,总会有将元素或者文字进行水平或者垂直居中的要求,各种CSS样式调整,搞的头都大了.这里将会介绍 CSS 中几种常用 ...
CSS中实现水平/垂直居中
CSS中实现水平/垂直居中在CSS中实现水平居中相对简单,但是却没有一个明确的属性表示这是实现垂直居中的,这就导致垂直居中的实现相对初学者来说难上许多.但是在实际的开发中垂直居中的需求常常出现,例如 ...
html脚本语言居中,web前端：CSS--几种常用的水平垂直居中对齐方法
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...
已知/未知宽高的浮动元素水平居中对齐和图片水平垂直居中对齐
一.已知宽高的浮动元素水平垂直居中对齐效果: 样式CSS: 1 <style> 2 .parent{ 3 position:relative; 4 border:2px solid #0 ...
【PDFBox】PDFBox操作PDF文档之添加本地图片、添加网络图片、图片宽高自适应、图片水平垂直居中对齐
这篇文章,主要介绍PDFBox操作PDF文档之添加本地图片.添加网络图片.图片宽高自适应.图片水平垂直居中对齐. 目录一.PDFBox操作图片 1.1.添加本地图片 (1)案例代码 (2)运行效果 ...
微信小程序图片文字水平垂直居中对齐
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站微信小程序图片文字水平垂直居中对齐要实现水平垂直居中可使用如下方案给父元素设置 .td {dis ...
css水平垂直居中对齐方式
css水平垂直居中总共有四种方法 ① 使用绝对定位注意:使用绝对定位居中需要固定宽高 position:absolute; top:0; left:0; bottom:0; right:0; wid ...
CSS基础学习--17 布局 - 水平垂直对齐
一.元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;.设置到元素的宽度将防止它溢出到容器的边缘.元素通过指定宽度,并将两边的空外边距平均分配: ...
css居中的几种方法_CSS几种常用的水平垂直居中对齐方法
文字的水平垂直居中 class="content"> <p>文字水平垂直居中p> </div> .content{ width: 400px; ...
CSS常见布局解决方案
最近要准备移动端项目,大半年没好好写过CSS了,今天恶补了一下CSS的一些布局,下面做一些分享. 水平居中布局 1.margin + 定宽 <div class="parent&quo ...

CSS 常见布局水平垂直居中对齐

一水平居中

1 行内元素水平居中

2 margin 自动水平居中

3 块级改行内块级水平居中

4 flex布局水平居中对齐

二垂直居中

1 line-height垂直居中

2 vertical-align垂直居中

3 flex垂直居中

三水平垂直居中

1 最好用最容易理解功能最强的还是flex布局

2 父相子绝

CSS 常见布局水平垂直居中对齐相关推荐

最新文章

热门文章

CSS 常见布局 水平垂直居中对齐

一 水平居中

1 行内元素水平居中

2 margin 自动水平居中

3 块级改行内块级水平居中

4 flex布局水平居中对齐

二 垂直居中

1 line-height垂直居中

2 vertical-align垂直居中

3 flex垂直居中

三 水平垂直居中

1 最好用最容易理解功能最强的还是flex布局

2 父相子绝

CSS 常见布局 水平垂直居中对齐相关推荐

最新文章

热门文章

CSS 常见布局水平垂直居中对齐

一水平居中

二垂直居中

三水平垂直居中

CSS 常见布局水平垂直居中对齐相关推荐