css垂直水平居中方案

1. 水平居中

  • 如果是inline元素:在父元素上面设置text-align:center;
  • 如果是block元素:设置宽度和margin:0 auto;
  • 如果是多块级元素:在父元素上面设置text-align:center;所有的子元素上面设置display:inline-block;

2. 垂直居中相对于水平居中要复杂些,结合自己的需求自己对待

  • 不知道元素具体的高:可以根据padding-top和padding-bottom来
  • 不知道元素具体的高:父元素设置成display:table,子元素设置成display:table-cell,vertical-align:middle;
  • 不知道元素具体的高:父元素设置position:relative;子元素设置position:absolut;trandform:translateY(-50%)
  • 知道元素具体的高是单行:如果是单行的可以根据line-height=height
  • 知道具体的高:position:absolute;top:50%;margin-top:-width/2

3. 不知道元素具体的宽和高的居中情况:父元素position:relative;子元素position:absolute;top:50%;left:50%;trandform:translateY(-50% -50%)

时间: 2024-10-25 13:51:17

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垂直水平居中

通过之前总结水平居中与垂直居中的基本方法,梳理垂直水平同时居中的方法就没有那么乱了. 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,因为居中效果

css 垂直水平居中总结

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

关于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实现未