垂直居中

css 垂直居中方法总结

由 断了今生、忘了曾经 提交于 2020-01-23 04:44:58
工作中遇到垂直居中问题，特此总结了一下几种方式与大家分享。本文讨论的垂直居中仅支持IE8+ 　1、使用绝对定位垂直居中 HTML <div class="container"> <div class="absolute_center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias aspernatur dolor dolorem dolores earum eos error harum iusto molestiae perspiciatis possimus quisquam quo, rem rerum sit ullam velit voluptates. </div> </div> CSS .container{ position: relative; width: 800px; height: 800px; border: 1px solid #000000; } .absolute_center{ position:absolute; width:200px; height:200px; top:0; bottom:0; left:0; right:0; margin:auto; background:#518fca; resize:both;/

CSS 垂直居中

由 纵饮孤独 提交于 2020-01-23 04:43:30
1、使用绝对定位垂直居中 　　绝对对位原理：元素在过度受限情况下，将margin设置为auto，浏览器会重算margin的值，过度受限指的是同时设置top/bottom与height或者left/right与width。 .absolute_center{ /*display:none;*/ position:absolute; width:200px; height:200px; top:0; bottom:0; left:0; right:0; margin:auto; background:#518fca; resize:both;/*用于设置了所有除overflow为visible的元素*/ overflow:auto; } 　　使用绝对定位要求元素必须设置明确高度。内容超过元素高度时需要设置overflow决定滚动条的出现 　　优点：支持响应式，只有这种方法在resize之后仍然垂直居中 　　缺点：没有显式设置overflow时，内容超过元素高度时会溢出，没有滚动条 　　 　　2、负marginTop方式 　　已知元素高度后，使用绝对定位将top设置为50%，mergin-top设置为内容高度的一半(height + padding) / 2；内容超过元素高度时需要设置overflow决定滚动条的出现 　　原理：top：50%元素上边界位于包含框中点

元素水平垂直居中的几种常用方法

由 ぃ、小莉子 提交于 2020-01-23 04:39:05
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素水平垂直居中</title> <style> /*方式一*/ .box{ width: 100px; height: 100px; background: red; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; } /*方式二*/ .box{ width: 100px; height: 100px; background: red; position: absolute; top: 50%; left: 50%; transform: translate(-50px,-50px); /*或者transform: translate(-50%,-50%);*/ } /*方式三 技巧*/ .box{ width: 100px; height: 100px; background: red; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin:auto; } /*方式四 弹性盒*/ .father{ display: flex; width: 400px; height:

未知高度垂直居中

由 主宰稳场 提交于 2020-01-21 12:42:38
以前遇到过这样的问题、记得最后没能很好的处理他。最近在一些项目群里发现了这样的两个方法特别收集起来分享给大家。 方法一： 使用绝对定位来处理，吧内部元素转换为表格的形式， display:table; 具体方法如下： 运行代码 编辑代码 查看源代码 资源添加向导 01. < style type = "text/css" > 02. * { padding:0; margin:0;} 03. ul.ul1 { list-style:none; margin:100px auto; width:500px;} 04. .ul1 li { width:100px; height:200px; float:left; margin-right:10px; border:1px solid #000;display:table; *display:block; zoom:1;} 05. .ul1 li span {display:table-cell; vertical-align:middle; *position:relative; top:50%;*display:block; width:100% ; text-align:center;} 06. .ul1 li span strong {margin:0 auto; *position:relative; top:-50%;

总结让元素水平垂直居中的方法

由 江枫思渺然 提交于 2020-01-20 10:24:57
前端开发中，我们经常需要对元素进行水平垂直居中。为此，特地总结了让元素居中的方法。 水平居中text-align：center; 这个是没有浮动的情况下，我们可以先将要居中的块级元素设为inline/inline-block，然后在其父元素上加上属性text-align:center;即可。如果要居中的块级元素直接是内联元素（span、img、a等），直接在其父级元素上加上属性text-align:center;即可； 专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） .way { border: 1px solid red; width: 250px; } .way img { max-width: 200px; } .way1 { text-align: center; font-size: 0px; //HTML图片之间，浏览器会产生默认的间距，父元素设置font-size：0px;可以很好地解决这个问题。 } <div class="way way1"> <img src="fj.jpg" alt=""> </div> 使用margin：0 auto;水平居中 前提：居中的元素必须是块级元素，如果是内联元素，需要添加属性display

垂直居中的几种方式

由 …衆ロ難τιáo~ 提交于 2020-01-19 19:26:01
定位方式居中 <div> <div class="parent"> <div class="inner"> </div> </div> </div> <style> .parent{ width: 60px; height: 60px; border: 1px solid palevioletred; position: relative; } .inner{ background: palegreen; width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; /*方式1 缺点需要提前知道inner元素大小*/ margin-top: -20px; /* 高度的一半 */ margin-left: -20px; /* 宽度的一半 */ /*方式2 */ /*transform: translate(-50%, -50%); !* 50%为自身尺寸的一半 *!*/ } https://jsfiddle.net/jsdt/kyr... 说明 方式二 transform 兼容性ie9+,方式一不会有兼容性问题。 margin auto方式 <div> <div class="parent"> <div class="inner"> </div> </div> </div> <style> .parent{

如何保持浮层水平垂直居中

由 家住魔仙堡 提交于 2020-01-15 15:14:42
(1)利用绝对定位和transform <div class="parent"> <div class="children"> </div> </div> .children{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); background: black; } 如果不确定子元素宽高度情况下，可以用此方法，不过css3属性不兼容IE低版本浏览器 (2) 利用flexbox .parent{ 　justify-content:center; 　align-items:center; 　display: -webkit-flex; } (3) 当子元素的宽高固定，父元素内含有除居中元素外其它元素（空标签也行）或者父元素的高度不为0时 　<div class="parent"> 　　　　　　<div class="children"></div> 　　　　　　<span></span> 　　　　</div> 　　　　.parent{ 　 height:400px;//有除对定位元素外其它元素时可不设，若没有则需要 position: relative; background: red; } .children{ width: 200px; height: 200px;

CSS 水平居中和垂直居中

由 浪尽此生 提交于 2020-01-11 05:05:35
转自： http://www.cnblogs.com/fu277/archive/2012/09/13/2400118.html 1.水平居中 (1) 文本、图片等行内元素的水平居中 　　给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。 (2) 确定宽度的块级元素的水平居中 　　通过设置margin-left:auto;和margin-right:auto;来实现的。 (3) 不确定宽度的块级元素的水平居中 　　方法一: 　　使用table标签，table本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto;和margin-right:auto;就可以实现水平居中! 　　将需要居中的部分包含在table标签内，对table设置margin-left:auto;和margin-right:auto;就可以使table水平居中，间接使需要居中的部分水平居中。 　　缺点：增加了无语意标签，加深了标签的嵌套层数。 <style type="text/css">ul{list-style:none; margin:0; padding:0;}.wrap{ width:500px; height:100px;}table{margin-left:auto;margin

CSS 构造表格

由 我只是一个虾纸丫 提交于 2020-01-03 15:35:11
表格边框 CSS 中设置表格边框，请使用 border 属性: <style type="text/css"> table{ border:1px solid red; } th,td{ border:1px solid red; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>描述</th> </tr> <tr> <td>小白</td> <td>小白是个猥琐但不下流的人</td> </tr> <tr> <td>小黑</td> <td>小白是个下流但不猥琐的人</td> </tr> <tr> <td>小红</td> <td>小白是个好学但不下流的人</td> </tr> </table> </body> 上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。 如果需要把表格显示为单线条边框，请使用 border-collapse 属性。( 细线表格 ) <style type="text/css"> table{ border:1px solid red; border-collapse:collapse;/*该属性加在table中*/ } th,td{ border:1px solid red; } </style> </head> <body> <table> <tr> <th>姓名

纯CSS实现垂直居中的几种方法

由 感情迁移 提交于 2020-01-03 14:04:42
垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。 方法1：table-cell html结构： 　　　　<div class = "box box1" > <span>垂直居中</span> 　　　　</div> css： 　　　　.box1{ 　　　　 display: table-cell; 　　　　 vertical-align: middle; 　　　　 text-align: center; 　　　　} 方法2：display:flex 　　　　 .box2{ 　　 display: flex; 　　 justify-content:center; 　　 align-items:Center; 　　　　} 方法3：绝对定位和负边距 　　　　.box3{position:relative;} 　　　　.box3 span{ 　　　　　　position: absolute; 　　　　　　width:100px; 　　　　　　height: 50px; 　　　　　　top:50%; 　　　　　　left:50%; 　　　　　　margin-left:-50px; 　　　　　　margin-top:-25px; 　　　　　　text-align
订阅 垂直居中