CSS布局：元素水平居中
CSS布局之元素水平居中
本文将依次介绍在不同条件下实现水平居中的多种方法及简单原理
Tip：下文中说的适用场景只是举了几个简单的例子方便读者理解。实际应用场景太复杂，生搬硬套容易出错。最重要的是掌握各种方法能够实现居中的原理。只要掌握了原理，那么不管问题怎么变都可以根据自己的理解选择合适的方法。
一、使用 text-align: center
1.原理
文本居中对齐text-align: center，可以适用于文本及图片的对齐
2.实现步骤
（1）直接在父元素中设置text-align: center;
3.适用场景
（1）适用于块级元素内部的行内元素水平居中
（2）适用于块级元素内图片的水平居中
（3）此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效
4.完整代码
（1）子元素为行内元素，直接使用text-align: center;进行水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是需要水平居中的文字</title>
<style>
.box {
width: 300px;
height: 100px;
text-align: center;
/*设置子元素内的行内元素水平居中*/
border: 1px solid #222222;
}
</style>
</head>
<body>
<div class="box">
<p>这是需要水平居中的文字</p>
</div>
</body>
</html>
（2）如果子元素是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是需要水平居中的内容</title>
<style>
.box {
width: 300px;
height: 100px;
text-align: center;
/*设置子元素内的行内元素水平居中*/
border: 1px solid #222222;
}
.child {
display: inline-block;
/*将块级元素转为行内元素实现居中。但不建议，因为转换了元素类型，可能会破坏布局*/
}
</style>
</head>
<body>
<div class="box">
<div class="child">这是需要居中的内容</div>
</div>
</body>
</html>
二、使用 margin
1.原理
利用margin属性的auto值，设置左右左右外边距为自动实现居中（只能设置水平居中，对垂直居中无效）
2.实现步骤
（1）子元素必须要有宽度
（2）设置子元素的margin: 0 auto实现水平居中
3.适用场景
（1）有宽度的子元素
4.完整代码
（1）有确定宽度使用margin居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin居中</title>
<style>
.box {
width: 300px;
height: 100px;
border: 1px solid #222222;
}
.child {
width: 100px;/*设置子元素宽度*/
margin: 0 auto;/*设置左右外边距自动实现水平居中*/
}
</style>
</head>
<body>
<div class="box">
<div class="child">margin居中</div>
</div>
</body>
</html>
（2）若不知道子元素宽度可用width:fit-content配合margin居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fit-content居中</title>
<style>
.box {
width: 300px;
height: 100px;
border: 1px solid #222222;
}
.child {
width: fit-content;
/*类似于包裹内容，宽度为内容宽度*/
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<div class="child">fit-content</div>
</div>
</body>
</html>
（3）用display:table；将子元素设为table元素，宽度为内容宽，再使用margin居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>转为表格元素居中</title>
<style>
.box {
width: 300px;
height: 100px;
border: 1px solid #222222;
}
.child {
display: table;
/*将元素转换为table类型*/
margin: 0 auto;
/*设置上下外边距为0，左右外边距自动*/
}
</style>
</head>
<body>
<div class="box">
<div class="child">转为表格元素居中</div>
</div>
</body>
</html>
三、使用相对定位relative和绝对定位absolute
1.原理
使用定位将元素移动到所需要的位置上，将元素定位到水平居中的位置就实现了居中
Tip：注意元素定位是以元素的某个边或者某个角作为参考，而不是以元素的中心点为参考
例：单个使用，是以边框为参考，两个组合使用是以角为参考点
（1）top：以元素上边框为参考，top：50px；就是元素上边框距离父元素上边框50px
（2）right：以元素右边框为参考，right：50px；就是元素右边框距离父元素右边框50px
（3）left和top组合使用：以元素的左上角的点为参考，top：50px；left：50px；表示元素左上角的点距离父元素上边框50px，距离父元素左边框50px；
（4）right和bottom组合使用：以元素的右下角的点为参考，bottom：50px；right：50px；表示元素右下角的点距离父元素下边框50px，距离父元素右边框50px；
（5）其他各种组合同理，两个对立方向的属性不能同时组合使用。例如top和bottom同时使用以top为准，bottom会失效。left和right；同时使用的话会以left为准right会失效。
（6）所以定位50%是，子元素边框移动到50%的位置，还需要移动回来子元素一半的宽度，达到真正的居中
2.实现步骤
（1）先将父元素设置为相对定位relative
（2）将子元素设置为绝对定位absolute（子绝父相）
（3）向右移动子元素，移动距离为父容器宽度的一半（50%）
（4）通过向左移动子元素的一半宽度以达到水平居中。（通过transform或margin实现）
3.适用场景
（1）未知宽度的子元素（使用transform）
（2）已知宽度的子元素（使用margin）
4.完整代码
（1）使用transform属性：不定宽，不需要有确定的宽度也可实现居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform居中</title>
<style>
.box {
width: 300px;
height: 100px;
position: relative;
border: 1px solid #222222;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="box">
<div class="child">transform居中</div>
</div>
</body>
</html>
（2）margin属性：子元素必须设置确定的宽度，且margin值不能用百分制会导致失效，要使用px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
.box {
width: 300px;
height: 200px;
position: relative;
border: 1px solid #222222;
}
.child {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
background: red;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
四、使用弹性盒子flex布局（通用方法）
方法一： justify-content属性
1.原理
利用布局神器弹性盒子的justify-content属性进行主轴方向布局。弹性盒子默认主轴是左右方向，侧轴是上下方向，设置主轴左右方向居中。即可达到使子元素左右居中的效果。
2.实现步骤
（1）父元素开启弹性盒子display:flex;
（2）父元素设置 justify-content:center;（主方向居中对齐）
3.适用场景
（1）未知宽度的元素水平居中
（2）已知宽度的元素水平居中
（3）浮动元素的水平居中
（4）可适用于多个子元素同时水平居中
4.完整代码
（1）通过justify-content属性实现居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>justify-content</title>
<style>
.box {
width: 300px;
height: 100px;
border: 1px solid #222222;
display: flex;/*开启弹性盒子*/
justify-content: center;/*设置主轴方向居中，对子元素生效*/
}
.child {
width: 50px;
height: 50px;
background: red;
border: 1px solid #222222;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
方法二： align-item属性
1.原理
利用布局神器弹性盒子的flex-direction:column更改主轴方向为上下方向。弹性盒子默认主轴是左右方向，侧轴是上下方向。更改后使用align-items属性设置子元素在侧轴方向居中，即可达到使子元素左右居中的效果。如果想对子元素单独设置，可在子元素上使用align-self属性，可以覆盖掉父元素的align-items属性。
2.实现步骤
（1）父元素开启弹性盒子display:flex;
（2）父元素使用flex-direction:column更改主轴方向为纵向
（3）父元素使用align-items属性设置子元素在侧轴方向居中
3.适用场景
（1）未知宽度的元素水平居中
（2）已知宽度的元素水平居中
（3）浮动元素的水平居中
4.完整代码
align-self属性：对子元素使用（解决有多个子元素，用flex布局实现其中单个子元素的居中的问题）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align-items</title>
<style>
.box {
width: 300px;
height: 100px;
border: 1px solid #222222;
display: flex;
flex-direction:column;/*设置主轴为纵向排列，此时侧轴为横向排列*/
align-items:center;/*设置子元素在侧轴方向上居中*/
}
.child {
width: 50px;
height: 50px;
background: red;
border: 1px solid #222222;
/*align-self:center;可以单独设置某个子元素的对齐方式*/
/*设置本身元素在侧轴方向上居中*/
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
方法三： margin属性
1.原理
在开启弹性盒子的时候也可以使用margin属性的auto值来居中，此时不需要有具体宽度
2.实现步骤
（1）父元素开启弹性盒子display:flex;
（2）子元素使用margin:0 auto;属性设置自身水平居中
3.适用场景
（1）未知宽度的元素水平居中
（2）已知宽度的元素水平居中
（3）浮动元素的水平居中
4.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex+margin</title>
<style>
.box {
width: 300px;
height: 100px;
border: 1px solid #222222;
display: flex;/*开启弹性盒子*/
}
.child {
width: 50px;
height: 50px;
background: red;
border: 1px solid #222222;
margin:0 auto;/*子元素利用maigin的auto值设置居中*/
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
CSS布局：元素水平居中的更多相关文章
- css确定元素水平居中和垂直居中
---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...
- CSS布局：水平居中
前言 一直对CSS布局一知半解,这段时间打算定下心来好好学习一下,于是先从最简单的水平居中布局开始入手.下面以分页组件为实例来记录各种实现方式. common.css <style type=& ...
- css -- 布局元素
默认情况下拥有布局的元素:HTML ,table,tr,td,img,hr,input,select,textarea,button,iframe,embed,object,applet,marque ...
- CSS布局--垂直水平居中
···设置两个盒子 <div class="parent"> <div class="child"> </div></ ...
- CSS中元素水平居中和垂直居中的方法
#CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...
- css 使元素居中
css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显 ...
- css点滴2—六种方式实现元素水平居中
本文参考文章<六种方式实现元素水平居中> 元素水平居中的方法,最常见的莫过于给元素一个显式的宽度,然后加上margin的左右值为auto.这种方式给固定宽度的元素设置居中是最方便不过的.但 ...
- 【css系列】六种实现元素水平居中方法
一.前言 居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中.垂直居中和水平垂直居中.而其中水平居中相对于后两者来说要简单得多.使用了css3的flexbox的属性轻松 ...
- CSS布局：元素水平垂直居中
CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...
随机推荐
- 《ElasticSearch6.x实战教程》之复杂搜索、Java客户端（下）
第八章-复杂搜索 黑夜给了我黑色的眼睛,我却用它寻找光明. 经过了解简单的API和简单搜索,已经基本上能应付大部分的使用场景.可是非关系型数据库数据的文档数据往往又多又杂,各种各样冗余的字段,组成了一 ...
- C#8.0 中使用默认接口成员更新接口
连载目录 [已更新最新开发文章,点击查看详细] 从 .NET Core 3.0 上的 C# 8.0 开始,可以在声明接口成员时定义实现. 最常见的方案是安全地将成员添加到已经由无数客户端发布并使 ...
- 快速java环境变量配置记录
配置java环境变量就是将java.exe和javac.exe的路径告诉系统,让系统能够找到这两个exe文件,废话不多说,直接开始如何配置环境变量,安装jdk时记住你的安装位置.(配置时必须要的) ...
- 基于Bitnami gitlab OVA包的gitlab 环境搭建
前言 最近在折腾gitlab,本篇记录搭建的过程方便以后查找 环境 Windows server + VMware 安装 为方便本次我们直接采用Bitnami的VOA安装包(VOA格式可同时兼容Vir ...
- Linux mysql开启远程访问
默认情况下远程访问会出现 Can't connect to MySQL server on '192.168.10.18′ (10061) 错误是因为,mysql的默认配置为了增强安全性,禁止了非本机 ...
- PHP--数据库访问（增、删、改、查）
练习通过数据库查询一个表,操作这个表的增.删.改.查的功能! 一.主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- 2015.11.27---Java
public class star{ public static void main(String[] args) { System.out.print("ha"); } }
- hive show databases 添加条件
show databases like 'test012301' ; 通配符: show databases like 'a*';
- linux初学者-常用基本命令篇
linux系统中有着许许多多的命令,并且软件也有可能自带命令,要想全部了解这些命令是很困难的,但是有一些基本命令是在平时的学习工作中应用的很广泛的.以下简要介绍几种linux系统中的常用命令. 1.m ...
- JAVA-注解(2)-自定义注解及反射注解
自定义注解开发 1.开发一个注解类 开发一个注解类的过程,非常类似于开发一个接口,只不过需要通过@interface关键字来声明 2.使用元注解修饰注解的声明 所谓的原注解是用来修饰注解声明的注释,可 ...