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.定 ...
随机推荐
- linux 服务器安装 nginx
每次安装 nginx 都在网上找教程,这次特意记录一下安装过程. 第一步:安装依赖 一键安装依赖 yum -y install gcc zlib zlib-devel pcre-devel opens ...
- javascript宏任务和微任务
函数 // 你不能改变一个函数的 name 属性的值, 因为该属性是只读的 var object = { // someMethod 属性指向一个匿名函数 someMethod: function() ...
- List自定义排序(可多条件)
1:先建需要排序的属性Model package com.msqsoft.app.queuing.util; public class ListOrderByModel { private Strin ...
- 51Nod.1766.树上最远点对(树的直径 RMQ 线段树/ST表)
题目链接 \(Description\) 给定一棵树.每次询问给定\(a\sim b,c\sim d\)两个下标区间,从这两个区间中各取一个点,使得这两个点距离最远.输出最远距离. \(n,q\leq ...
- 快速学习MarkDown语法及MarkDown拓展语法
使用Markdown编辑器写博客 前半部分为效果后半部分为markdown格式,推荐开起两个窗口对比阅读 Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数 ...
- System.out.println()和System.err.println()
在一次笔试中遇到了一个System.err.println()的输出,之前没有见过,回来查一查,自己还是见识太短,来补充一下. 首先看一看jdk中 来一个简单的实验 第一次显示 第二次显示 1. 发现 ...
- 基于Python Pillow库生成随机验证码
from PIL import Image from PIL import ImageDraw from PIL import ImageFont import random class ValidC ...
- MySQL数据库引擎MyISAM和InnoDB的区别介绍
MySQL数据库有多种存储引擎:比如:MyISAM.InnoDB.MERGE.MEMORY(HEAP).BDB(BerkeleyDB).EXAMPLE.FEDERATED.ARCHIVE.CSV.BL ...
- 最长递增子序列( LIS)
LIS LIS的优化说白了其实是贪心算法,比如说让你求一个最长上升子序列把,一起走一遍. 比如说(4, 2, 3, 1, 2,3,5)这个序列,求他的最长上升子序列,那么来看,如果求最长的上升序列,那 ...
- UltralEdit 替换回车换行符
打开 Ue 工具,写下内容,如下图: 然后按 Ctrl + r,输入 ^p,点击按钮 “全部替换”, 如下图: