前言

在CSS布局中,水平居中与垂直居中一直是用到比较多的,在本篇中将介绍水平居中、垂直居中的几种方式。

示例

HTML

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

  

CSS

.parent {
width: 200px;
height: 100px;
position: relative;
background-color: #374858;
} .parent .child {
width: 100px;
height: 50px;
background-color: #9dc3e6;
}

  

效果

1. 水平居中

这里将分别介绍当子元素的样式为内联块级以及绝对定位时的水平居中布局方案。

1.1 子元素为内联样式

说明:当子元素为内联样式时(display: inline-block | inline-flex | inline-grid | inline-table 也含有内联样式特性),只需要设置父元素的text-align: center。

CSS

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;} .parent {
text-align: center;
}
.parent .child {
display: inline-block;
}

1.2 子元素为块级样式

说明:父元素和子元素都是块级元素时,设置子元素的margin: 0 auto即可。

注意:此时的子元素需要设置width。

CSS

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;} .parent {} .parent .child {
display: block;
margin: 0 auto;
}

1.3 子元素 position: absolute

CSS

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;} .parent {} .parent .child {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}

1.4 父元素 display: flex

说明:此时子元素可为内联、块级元素。

浏览器支持:IE 11。

CSS

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;} .parent {
display: flex;
justify-content: center;
} .child {
display: inline;
margin: 0 auto;
}

  

2. 垂直居中

同水平居中一样,这里也将分别介绍当子元素的样式为内联块级以及绝对定位时的垂直居中布局方案。

2.1 子元素为块级元素

CSS

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;} .parent {
display: table-cell;
vertical-align: middle;
} .parent .child {
display: block;
}

2.2 子元素 position: absolute

CSS

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;} .parent {} .parent .child {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}

2.3 父元素 display: flex

说明:此时子元素可为内联、块级元素

浏览器支持:IE 11。

CSS

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;} .parent {
display: flex;
align-items: center;
} .parent .child {
display: inline;
}

3. 水平居中+垂直居中

3.1 子元素 display: inline-block

说明:设置子元素的display: inline-block。

注意:此时的子元素需要设置width和height。

CSS

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;} .parent {
text-align: center;
display: table-cell;
vertical-align: middle;
} .parent .child {
display: inline-block;
}

3.2 子元素 position: absolute

说明:此时的子元素为绝对定位。

CSS

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;} .parent {
position: relative;
} .parent .child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

3.3 父元素 display: flex

浏览器支持IE 11。

CSS

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;} .parent {
display: flex;
justify-content: center;
align-items: center;
} .parent .child {}
End
菜单加载中...

CSS 水平居中与垂直居中的更多相关文章

  1. CSS水平居中和垂直居中解决方案

    一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...

  2. CSS 水平居中/布局 垂直居中 (月经问题)

    水平居中 如果它是一个行内元素 对其父元素使用 text-align:center 即可实现. <p style = " text-align:center; width:300px; ...

  3. css水平居中和垂直居中

    水平居中:内联元素:text-align:center;相对于父级居中显示块级元素:margin:0 auto;但是需要同时width,否则无法看到效果多个块级元素居中:在此想要探讨一下display ...

  4. CSS 水平居中和垂直居中

    1.水平居中——行内元素 text-align: center; 2.水平居中——定宽块状元素 margin: auto,满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto” ...

  5. CSS水平居中与垂直居中的方法

    一.水平居中 1.行内元素水平居中 在父元素里添加text-align:center即可.代码如下: <style> .container-1 { height: 50px; border ...

  6. CSS的水平居中和垂直居中解决方案

    在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案 ...

  7. css确定元素水平居中和垂直居中

    ---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...

  8. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  9. CSS中元素水平居中和垂直居中的方法

    #CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...

随机推荐

  1. linux 服务器安装 nginx

    每次安装 nginx 都在网上找教程,这次特意记录一下安装过程. 第一步:安装依赖 一键安装依赖 yum -y install gcc zlib zlib-devel pcre-devel opens ...

  2. javascript宏任务和微任务

    函数 // 你不能改变一个函数的 name 属性的值, 因为该属性是只读的 var object = { // someMethod 属性指向一个匿名函数 someMethod: function() ...

  3. List自定义排序(可多条件)

    1:先建需要排序的属性Model package com.msqsoft.app.queuing.util; public class ListOrderByModel { private Strin ...

  4. 51Nod.1766.树上最远点对(树的直径 RMQ 线段树/ST表)

    题目链接 \(Description\) 给定一棵树.每次询问给定\(a\sim b,c\sim d\)两个下标区间,从这两个区间中各取一个点,使得这两个点距离最远.输出最远距离. \(n,q\leq ...

  5. 快速学习MarkDown语法及MarkDown拓展语法

    使用Markdown编辑器写博客 前半部分为效果后半部分为markdown格式,推荐开起两个窗口对比阅读 Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数 ...

  6. System.out.println()和System.err.println()

    在一次笔试中遇到了一个System.err.println()的输出,之前没有见过,回来查一查,自己还是见识太短,来补充一下. 首先看一看jdk中 来一个简单的实验 第一次显示 第二次显示 1. 发现 ...

  7. 基于Python Pillow库生成随机验证码

    from PIL import Image from PIL import ImageDraw from PIL import ImageFont import random class ValidC ...

  8. MySQL数据库引擎MyISAM和InnoDB的区别介绍

    MySQL数据库有多种存储引擎:比如:MyISAM.InnoDB.MERGE.MEMORY(HEAP).BDB(BerkeleyDB).EXAMPLE.FEDERATED.ARCHIVE.CSV.BL ...

  9. 最长递增子序列( LIS)

    LIS LIS的优化说白了其实是贪心算法,比如说让你求一个最长上升子序列把,一起走一遍. 比如说(4, 2, 3, 1, 2,3,5)这个序列,求他的最长上升子序列,那么来看,如果求最长的上升序列,那 ...

  10. UltralEdit 替换回车换行符

    打开 Ue 工具,写下内容,如下图: 然后按 Ctrl + r,输入 ^p,点击按钮 “全部替换”, 如下图: