CSS 水平居中与垂直居中
前言
在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 {}
CSS 水平居中与垂直居中的更多相关文章
- CSS水平居中和垂直居中解决方案
一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...
- CSS 水平居中/布局 垂直居中 (月经问题)
水平居中 如果它是一个行内元素 对其父元素使用 text-align:center 即可实现. <p style = " text-align:center; width:300px; ...
- css水平居中和垂直居中
水平居中:内联元素:text-align:center;相对于父级居中显示块级元素:margin:0 auto;但是需要同时width,否则无法看到效果多个块级元素居中:在此想要探讨一下display ...
- CSS 水平居中和垂直居中
1.水平居中——行内元素 text-align: center; 2.水平居中——定宽块状元素 margin: auto,满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto” ...
- CSS水平居中与垂直居中的方法
一.水平居中 1.行内元素水平居中 在父元素里添加text-align:center即可.代码如下: <style> .container-1 { height: 50px; border ...
- CSS的水平居中和垂直居中解决方案
在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案 ...
- css确定元素水平居中和垂直居中
---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
- CSS中元素水平居中和垂直居中的方法
#CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...
随机推荐
- python & MySQLdb(two)
实现python封装 # encoding=utf8 import MySQLdb #定义类 class MysqlHelper(): def __init__(self,host,port,db,u ...
- lvs负载均衡概述
- JS运算符问题
以下代码是否报错,如果不报错输出什么,为什么 var x = !!"Hello" + (!"world", !!"from here!!") ...
- 理解JSON对象:JSON.parse、 JSON.stringify
何时是JSON,何时不是JSON? JSON就是一个有特殊规则的字符串,按照这个规则我们就可以把这个字符串解析成JS对象. JSON是设计成描述数据交换格式的,他也有自己的语法,这个语法是JavaSc ...
- 数据仓库分层ODS DW DM 主题 标签
数据仓库知识之ODS/DW/DM - xingchaojun的专栏 - CSDN博客 数据仓库为什么要分层 - 晨柳溪 - 博客园 数据仓库的架构与设计 - Trigl的博客 - CSDN博客 数据仓 ...
- C#中form窗体之间的传递几个方法
- 英语口语练习系列-C34-儿童-谈论物品和人-武陵春
词汇-儿童 child a child favorite game toy regulation breadwinner dominant selfish ancestor custom belief ...
- Python2048小游戏demo
# -*- coding:UTF-8 -*- #! /usr/bin/python3 import random v = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, ...
- IAR7.51提示秘钥无效IAR 以及 CCDebug驱动(包含win7 64bit)
今天IAR不识别我的仿真器,然后我感觉驱动有问题,就把之前的驱动卸载了,但是按照以前的方法按章驱动(选择路径到IAR的某个目录),提示找不到驱动... 也不想重新装个IAR了,于是到CSDN上下载了这 ...
- React入门——制作一个TodoList App
源码 import React, { Component, Fragment } from "react"; class TodoList extends Component { ...