CSS垂直水平居中

通过之前总结水平居中与垂直居中的基本方法，梳理垂直水平同时居中的方法就没有那么乱了。

  • text-align：center + line-height

如下图，div2中用text-align+line-height实现单行文本水平垂直居中。

也可以将div2设置为inline-block实现div垂直水平居中。

  • text-align：center + vertical-align：middle

如果想让div2在div1中居中，那么需要将父元素设置text-align：center，因为居中效果只对文本内容和行内元素有效，那我们将子元素div2设置为inline-block元素，还要将父元素设置为设置为table-cell元素，vertical-align：middle，

  • margin：0 auto+vertical-align：middle

?margin: 0 auto；在本身元素上设置，可以实现块级元素水平居中，所以将子元素设置为margin：0 auto；再还要将父元素设置为设置为table-cell元素，vertical-align：middle即可

  • 绝对定位实现垂直水平居中

绝对定位元素垂直水平居中：因为绝对定位元素具有伸缩性，所以如果我们将绝对定位元素的width设置为auto时，同时把left与right设置为0，那么元素就会将其相对的父元素水平填充满。这时如果我们把宽度设置为固定值，margin为auto的前提下，只要 left 和 right 的值相等（或都为0），且不超过其相对元素减去该绝对定位元素 width 的一半，就可以实现水平居中了。垂直居中也是如此，只要top与bottom的值也相等或者都为0就可以，这样我们的绝对定位元素就做到了垂直水平居中了。

原文地址：https://www.cnblogs.com/aaaaniu/p/8284371.html

时间： 2024-10-28 09:28:29

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

CSS垂直水平居中方法总结

在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"></div> </div> 1.水平居中:margin:auto; .wrap{ width: 400px; height: 400px; background-color: lightblue; } .content{ width: 200px; height: 200px; ba

css 垂直水平居中总结

前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求: 固定宽高 不固定宽高 主要兼容: ie8+  主流浏览器 ie6,7 行高 1. 利用行高与高度相同,实现单行文本居中 缺点:只能是单行文本 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title>

css垂直水平居中方案

1. 水平居中 如果是inline元素:在父元素上面设置text-align:center; 如果是block元素:设置宽度和margin:0 auto; 如果是多块级元素:在父元素上面设置text-align:center;所有的子元素上面设置display:inline-block; 2. 垂直居中相对于水平居中要复杂些,结合自己的需求自己对待 不知道元素具体的高:可以根据padding-top和padding-bottom来 不知道元素具体的高:父元素设置成display:table,子元

关于css垂直水平居中的几种方法

第一种, 针对内联元素居中. <div class="box box1"> <span class="test">垂直居中</span> </div> <style> .box{ width: 200px; height: 200px; border:1px solid red; } .box1{ display: table-cell; vertical-align: middle; text-align

css实现浏览器垂直水平居中效果代码

css实现浏览器垂直水平居中效果代码:可能是由于居中相对美观一些吧,所以一些弹窗或者功能模块出现的位置都是位于网页中间,下面就介绍一端利用css实现的将div实现垂直水平居中的效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/

css如何实现未知宽高div中图片垂直水平居中效果

css如何实现未知宽高div中图片垂直水平居中效果:在有时候可能有这样的情况,那就是想让一个图片在div中实现垂直水平居中效果,但是有时候div的尺寸是位置的,下面通过代码实例介绍一下在这种情况下如何实现图片的垂直水平居中效果.代码如下:实例一: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&q

css 中让盒子垂直水平居中

css中如何让div盒子垂直水平居中 整体代码如下:(仅供参考) <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .box{ width: 200px; height: 200px; position:absolute; left:50%; top:50%; mar

css实现图片在div中垂直水平居中代码实例

css实现图片在div中垂直水平居中代码实例:让图片在一个元素中垂直水平居中这样的需求在实际应用中还是很多的,下面就通过代码实例介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

div+css实现未知宽高元素垂直水平居中

div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框垂直水平居中??如果用JS的话就好办了,但是JS的使用会对页面性能造成影响,而且能用CSS实现的干嘛用JS呢,嘿嘿 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>div+css实现未