CSS实现水平居中与垂直居中

一、水平居中
- 1. 必备知识
- - 1.1 text-align 属性
  - 1.2 display 属性
  - 1.3 margin 属性
  - 1.4 position 属性
  - 1.5 transform 属性
- 2. 实现方式
- - 2.1 内联元素居中
  - 2.2 块级元素居中
  - - 2.2.1 `margin: 0 auto`
    - 2.2.2 `text-align + display`
    - 2.2.3 `position + transform`
二、垂直居中
- 1. 偏移实现居中
- 2. flex弹性布局实现居中

一、水平居中

1. 必备知识

1.1 text-align 属性

text-align 属性指定元素文本的水平对齐方式（作用于子元素和文本）。其常用的值一般有三种：

left 左对齐
right 右对齐
center 居中对齐

1.2 display 属性

display 属性规定元素应该生成的框的类型（作用与元素自身）。其常用的值一般有四种：

none 不会被显示
block 显示为块级元素
inline 默认，显示为内联元素
inline-block 显示为行内块级元素

1.3 margin 属性

margin (外边距)属性定义元素周围的空间（作用于元素自身）。它一共有四个属性值，可以简写。

设置一个值：上右下左
设置两个值：上下 - 左右
设置三个值：上 - 左右 - 下
设置四个值：上 - 右 - 下 - 左

1.4 position 属性

position 属性指定一个元素的定位方法的类型（作用于元素自身）。其常用的值一般有四种：

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
fixed 生成固定定位的元素，相对于浏览器窗口进行定位。
sticky 粘性定位，该定位基于用户滚动的位置。

1.5 transform 属性

transform 属性应用于元素的2D或3D转换（作用于元素自身）。这个属性允许你将元素旋转，缩放，移动，倾斜等。这个属性比较复杂，在这里我们用到的主要是移动。

2. 实现方式

既然是要实现水平居中，那么父元素必然是一个块级元素，此时根据要实现水平居中的子元素的 display 状态可分为两种情况。

2.1 内联元素居中

内联元素的水平居中非常简单，只需要在父元素中设置 text-align: center 即可。

2.2 块级元素居中

2.2.1 `margin: 0 auto`

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>测试</title><style type="text/css">#parent {width: 400px;height: 400px;background: rgb(51, 236, 196);}#child {width: 100px;height: 100px;margin: 0 auto;background: coral;}</style></head><body><div id="parent"><div id="child"></div></div></body>
</html>

效果图：

这种居中方式的优缺点：

优点：只需对子级标签进行设置就可以实现居中效果。
缺点：如果子级标签脱离文档流，将会导致margin属性值失效。

导致元素脱离文档流的几个属性：

float 浮动属性会导致脱离文档流
position: absolute 绝对定位
position: fixed 固定定位

2.2.2 `text-align + display`

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>测试</title><style type="text/css">#parent {width: 400px;height: 400px;background: rgb(51, 236, 196);text-align: center;}#child {width: 100px;height: 100px;background: coral;display: inline-block;}</style></head><body><div id="parent"><div id="child"><div >居中文本</div></div></div></body>
</html>

效果图：

这种方式是通过设置子元素左右外边距自动填充，平分剩下的空间来实现水平居中，它的优缺点如下：

优点：浏览器兼容性比较好，因为 text-align 和 inline-block 这两个属性是 CSS2 支持的，所以在老版本的浏览器中同样可以运行。
缺点：text-align 属性具有继承性，使用它将会导致子标签的文本也是居中的，如果要解决这个问题就需要在其子标签中重新设置 text-align 属性，但是设置后，该标签的子标签同样会继承上一级的 text-align，因此使用这种居中方式很有可能会每个子级标签重新设置text-align属性。

2.2.3 `position + transform`

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>测试</title><style type="text/css">#parent {width: 400px;height: 400px;background: rgb(51, 236, 196);position: relative;}#child {width: 100px;height: 100px;background: coral;position: absolute;left: 50%;transform: translateX(-50%);}</style></head><body><div id="parent"><div id="child"></div></div></body>
</html>

效果图：

在这里需要注意一点，absolute 定位是相对于 static 定位以外的第一个父元素进行定位，因此，我们在使用 absolute 定位时一定要给父元素定位。（此处也可以子元素使用relative定位，父元素不给定位，效果是一样的）
此方法是先将给子元素绝对定位，随后通过 left: 50% 让子元素向右偏移父元素一半宽度的距离，最后通过 transform: translateX(-50%) 让子元素向左偏移自身一半宽度的距离，借此实现水平居中。

二、垂直居中

1. 偏移实现居中

采用上面所描述的水平居中第三种方式（position + transform）即可实现元素的垂直居中。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>测试</title><style type="text/css">#parent {width: 400px;height: 400px;background: rgb(51, 236, 196);}#child {width: 100px;height: 100px;background: coral;margin: 0 auto;position: relative;top: 50%;transform: translateY(-50%);}</style></head><body><div id="parent"><div id="child"></div></div></body>
</html>

效果图：

此处代码实例中，水平居中是用 margin: 0 auto 实现的，但要注意的是只有定位是 relative 时才可使用 margin 属性，若定位为 absolute 则该属性失效，只能使用 transform 属性实现元素的水平居中，此时子元素样式应为（注意此时父元素需要添加 position: relative 属性）：

#child {width: 100px;height: 100px;background: coral;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

2. flex弹性布局实现居中

使用 CSS3 的弹性布局实现元素的垂直和水平居中会更加方便。只要给父元素设置 display: flex，然后设置对齐方式为两个居中对齐就行。关于flex弹性布局可以看看阮一峰老师的博客，里面有详细的讲解。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>测试</title><style type="text/css">#parent {width: 400px;height: 400px;background: rgb(51, 236, 196);display: flex;justify-content: center;align-items: center;}#child {width: 100px;height: 100px;background: coral;}</style></head><body><div id="parent"><div id="child"></div></div></body>
</html>

CSS实现水平居中与垂直居中相关推荐

CSS的水平居中、垂直居中和水平垂直居中
CSS的水平居中.垂直居中和水平垂直居中 1.水平居中水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中这里行内元素是指文本text.图像img.按钮超链接等,只需给父元素 ...
CSS的水平居中与垂直居中
一.水平居中行内元素水平居中:指文本text.图像img.按钮超链接等只需给父元素设置text-align:center即可实现 .center{text-align:center; } < ...
css实现水平居中和垂直居中
css实现居中 1.水平居中 div { width:100px//设置宽度固定 margin: auto //居中 } 2.利用绝对定位实现水平垂直居中: position: absolute: l ...
CSS居中——水平居中、垂直居中方法
水平居中 1.行内或类行内元素(如文本.链接) 在块级父元素中用CSS样式实现行内元素水平居中,只需要设置:text-align: center; 这种方法可以让 inline / inline-bl ...
CSS实现水平居中、垂直居中、水平垂直居中
水平居中行内元素行内元素想要水平居中,只需要给父元素添加text-align:center即可. <div class='container'><span>example& ...
css图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中利用margin: 0 ...
html悬浮的图片居中,HTML/CSS：图片居中(水平居中和垂直居中)
css图片水平居中 1.利用margin: 0 auto实现图片水平居中利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下: 2.利用文本的水平 ...
CSS水平居中，垂直居中，水平垂直居中
本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: 水平居中 1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中.此方法对 ...
css 水平居中和垂直居中
转自子非鱼87(http://www.cnblogs.com/fu277/archive/2012/09/13/2400118.html) 1.水平居中 (1) 文本.图片等行内元素的水平居中给父元 ...

CSS实现水平居中与垂直居中

CSS实现水平居中与垂直居中

一、水平居中

1. 必备知识

1.1 text-align 属性

1.2 display 属性

1.3 margin 属性

1.4 position 属性

1.5 transform 属性

2. 实现方式

2.1 内联元素居中

2.2 块级元素居中

2.2.1 `margin: 0 auto`

2.2.2 `text-align + display`

2.2.3 `position + transform`

二、垂直居中

1. 偏移实现居中

2. flex弹性布局实现居中

CSS实现水平居中与垂直居中相关推荐

最新文章

热门文章

CSS实现水平居中与垂直居中

CSS实现水平居中与垂直居中

一、水平居中

1. 必备知识

1.1 text-align 属性

1.2 display 属性

1.3 margin 属性

1.4 position 属性

1.5 transform 属性

2. 实现方式

2.1 内联元素居中

2.2 块级元素居中

2.2.1 margin: 0 auto

2.2.2 text-align + display

2.2.3 position + transform

二、垂直居中

1. 偏移实现居中

2. flex弹性布局实现居中

CSS实现水平居中与垂直居中相关推荐

最新文章

热门文章

2.2.1 `margin: 0 auto`

2.2.2 `text-align + display`

2.2.3 `position + transform`