CSS居中——水平居中、垂直居中方法
水平居中
1、行内或类行内元素（如文本、链接）
在块级父元素中用CSS样式实现行内元素水平居中，只需要设置：text-align: center;
这种方法可以让 inline / inline-block / inline-table / flex 等类型的元素实现居中。
效果图：
代码：
<style>body{background-color: coral;}#div1,#div2{width: 400px;height: 100px;text-align: center;margin: 20px 0;padding: 20px;background-color: white;}#div2 a{text-decoration: none;color: white;padding: 3px 8px;border-radius: 5px;background-color: cornflowerblue;}
</style><body><div id="div1">这是一段简单的文字，水平居中</div><div id="div2"><a href="#">hyperlink1</a><a href="#">hyperlink2</a><a href="#">hyperlink3</a><a href="#">hyperlink4</a></div>
</body>2、子盒子已知宽度
效果图
html代码
<body><div class="div1"><div class="div2"></div></div>
</body>实现方法
① margin: 0 auto;
<style>
body{background-color: lightgoldenrodyellow;}.div1{background-color: cyan;}.div2{width: 200px;height: 100px;margin: 0 auto;background-color: rgb(132, 247, 65);color: white;}
</style>② position定位＋margin-left
<style>body{background-color: lightgoldenrodyellow;}.div1{position: relative;}.div2{width: 200px;height: 100px;position: absolute;left: 50%;/* margin-left: 负的一半宽度width */margin-left: -100px;background-color: rgb(132, 247, 65);color: white;}
</style>3、子盒子有无宽度均适用
效果图
html代码
<body><div class="div1"><div class="div2">居中</div></div>
</body>实现方法
① position定位 + transform
<style>body{background-color: rgb(238, 197, 203);}.div1{position: relative;}.div2{position: absolute;left: 50%;/* 使用transform在X轴方向移-50%，无需根据宽度计算 */transform: translateX(-50%);background-color: rgb(145, 212, 235);font-size: 40px;}
</style>② flex布局
<style>body{background-color: rgb(238, 197, 203);}.div1{display: flex;justify-content: center;}.div2{background-color: rgb(145, 212, 235);font-size: 40px;}
</style>垂直居中
1、行内元素
设置line-height与父级元素的height相等
效果图：
代码：
<style>.div1{height: 400px;background-color: aquamarine;}.div2{width: 200px;height: 200px;line-height: 400px; /*设置line-height与父级元素的height相等*/font-size: 30px;}
</style><body><div class="div1"><div class="div2">垂直居中</div></div>
</body>2、子盒子已知高度
效果图
html代码
<body><div class="div1"><div class="div2">垂直居中</div></div>
</body>实现方法
① position定位+ margin-top
<style>.div1{height: 400px;background-color: aquamarine;position: relative;}.div2{width: 250px;height: 200px;background-color: coral;position: absolute;top: 50%;/* margin-top: 负的一半高度height */margin-top: -100px;line-height: 200px;}
</style>3、子盒子有无高度均适用
效果图
html代码
<body><div class="div1"><div class="div2">垂直居中</div></div>
</body>实现方法
① 父盒子CSS样式设置伪类元素
基本思路：使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。
<style>.div1 {height: 400px;background-color: rgb(177, 236, 247);}.div1::after{content:'';height:100%;display:inline-block;vertical-align:middle;}.div2{width: 250px;background-color: rgb(219, 166, 166);display:inline-block;vertical-align:middle;line-height: 200px;}
</style>② position + transform
<style>.div1{height: 400px;background-color: rgb(177, 236, 247);position: relative;}.div2{width: 250px;background-color: rgb(219, 166, 166);position: absolute;top: 50%;transform: translateY(-50%);line-height: 200px;}
</style>③ flex布局
<style>.div1{height: 400px;background-color: rgb(177, 236, 247);display: flex;align-items: center;}.div2{width: 250px;background-color: rgb(219, 166, 166);line-height: 200px;}
</style><body><div class="div1"><div class="div2">垂直居中</div></div>
</body>水平垂直居中
根据需求综合以上方法即可实现。
CSS居中——水平居中、垂直居中方法相关推荐
- 清除浮动的方法总结CSS实现水平垂直居中方法总结
1.清除浮动的方法总结 当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至 ...
- css居中的实现方法(包括水平居中和垂直居中)
1.有这样一段代码: <p>您在<img src="images/querenzhifu.png">后会指引去支付宝,按照支付宝的提示完成付款操作.< ...
- element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证 首先是element UI 提供的基础 ...
- css img 居中/水平居中/垂直居中
这是一个很简单的问题 , 也是一个很蛋疼的问题: 以下是html代码 <a class="img_center" herf="#"><img ...
- android 按钮水平居中,Android笔记：Button居中|水平居中|垂直居中（总结）
- 鉴于各位前辈都有关于居中的示例,今天小弟在这结合自己的理解总结一下. - 居中呢,这里分两种不同布局方式的居中!分别是 LinearLayout 和RelativeLayout. - 首先说的是 ...
- css中的垂直居中方法
单行文字 (外行高度固定) line-height 行高, 将line-height值与外部标签盒子的高度值设置成一致就可以了. height:3em; line-height:3em; 多行文字 图 ...
- 6种方法实现css布局水平居中
说到常见css布局,面试时经常也会考考大家,看对css知识掌握的咋样,对css盒模型理解没,比如会问css布局水平居中的方法或者css布局垂直居中的方法等,今天分享常见css布局水平居中的6种方法. ...
- css 组件水平居中,CSS水平居中
一.使用CSS水平居中的三种情况 . 1.行内元素(文本.图片等): 2.定宽块状元素 : 3.不定宽块状元素(3种方法): 二.具体解决方法. 1.行内元素(文本.图片等): 给父元素设置 text ...
- html屏幕垂直居中显示,HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结...
水平居中直接加上 标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两种在屏幕正中(水平居中+垂直居中)的方法 放上示范的html代码: MAIN 方法一: div使用绝对布局, ...
最新文章
- pku 1077 Eight
- Cisco的相关配置
- OC__part11.1
- CSS中position详解与常见应用实现
- [轻微]WEB服务器启用了OPTIONS方法/如何禁止DELETE，PUT，OPTIONS等协议访问应用程序/tomcat下禁用不安全的http方法...
- 模因（meme）收集
- ati 缺少关键性文件_win10重装系统缺少计算机所需的介质驱动程序的解决方法
- vbs教程《变量使用》
- STM32-ESP8266wifi模块实现
- 【金融支付】名词：支付账户、备付金、网络支付、银行卡清算、贷记卡、代扣、代付
- 实战tkinter图形界面开发_Tkinter python（图形开发界面）
- 如何解决vue项目本地ip地址无法访问项目问题？【亲测有效】
- 加密的pdf文件如何解密？
- 要点回顾｜10 月 Pulsar 中文开发者与用户组会议
- 必看！！！一级建造师各科老师推荐！！！
- 美元兑人民币汇率对黄金价格的预测
- 蒙特卡洛方法求圆周率
- C语言编程练习：打印九九口诀表
- a19_Python文件I/O---学习笔记
- ubuntu 安装kali_如何在Linux，Windows，Kali，Ubuntu，Mint和示例中安装和使用exiftool