垂直居中

<div class="wrapper"> <div class="content"></div> </div> 一、水平居中 行内元素：对其父元素应用text-align:center属性 .wrapper{ text-align: center; } 块级元素：对自身应用margin:auto属性 .content{ width: 200px; margin: 0 auto; } 二、水平垂直居中 元素固定尺寸 一般 .content{ width: 400px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -200px; } 使用calc() .content{ width: 400px; height: 200px; position: absolute; top: calc(50% - 100px); left: calc(50% - 200px); } 元素尺寸由内容决定 绝对定位 .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } [注意] 当居中元素的高度超过了视口，则它的顶部会被视口裁切掉 在某些浏览器中

1. <div style="width:200px;height:200px;border:solid blue;position:relative;"> <div style="width:100px;height:100px;margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: red;"></div> </div> 2. <div style="width:200px;height:200px;border:2px solid #000;display:table-cell;vertical-align:middle;text-align: center;"> <div style="width:100px;height:100px;display:inline-block;background-color: red;"></div> </div> 子div如果是block元素，在里面加一个margin:auto;，效果也一样 <div style="width:200px;height:200px;border:2px solid #000;display:table-cell;vertical-align:middle;text-align: center;

1 对于最最基础的单行文本，要想实现垂直方向居中，很简单的方法就是让文本的行高等于父级元素的高度。这个仅适用于让当行文本垂直居中的情况，多行文本就不适用了。 father{ width:500px; height:500px } child{ line-height:500px; } 2 如果是图片的话，直接设置img的属性vertical-align: middle;前提是需要设置父级元素为块级元素并且设置高度。 3 用absolute绝对定位，分别父级元素和子元素的position为 HTML： <div class="out"> <div class="in"> 节点内容节点内容 </div> </div> .out {position: relative;} .in { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; } 这个只适玉元素本身有规定的高度和宽度，但是实际应用中是要根据内容才能确定高度，所以就有了升级版 4 用absolute定位，并且可不限制高度。很简单，借助强大的CSS3中的translate() 变形函数。具体原理是translate() 属性值的百分比是元素本身的宽高为基准进行计算的

已知宽高： 1、利用绝对定位盒模型的特性； 绝对定位的盒模型有以下特性： left+right+width+水平方向的margin+padding=包含块的width； top+bottom+height+垂直方向的margin+padding=包含块的height； 代码示例： #parent{ /* 父相子绝 */ position: relative; /* 包含块的宽高必须是已知的 */ width: 200px; height: 200px; border: 1px solid; } #child { /* 需要居中的元素绝对定位 */ position: absolute; /* 居中的元素宽高要已知 */ width: 50px; height: 50px; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-color: pink; } 2、利用margin为赋值进行反向偏移； 代码示例： #parent{ /* 父相子绝 */ position: relative; /* 包含块的宽高必须是已知的 */ width: 200px; height: 200px; border: 1px solid; } #child { /* 需要居中的元素绝对定位 */ position: absolute

未知高度的图片垂直居中（转自：http://stylechen.com/img-middle.html） 图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。 下图是理想中的效果图，外部容器的宽度和高度固定，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。 但是实际在浏览器中实现起来的效果并不是很完美，由于各浏览器的解析都各不相同，所以在各浏览器都会有1px-3px的偏差。 方法一： 该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为 display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。 HTML结构部分： 1 <div id= "box" > 2 <span><img src= "images/demo.jpg" alt= "" /></span> 3 </div> CSS样式部分： 01 <style type= "text/css" > 02 #box{ 03 width:500px;height:400px; 04 display:table; 05

作为一名前端工程师，元素居中是日常开发中处理的最常见问题之一。实现 CSS 居中的方式有很多种，各有利弊，这里我总结一下我遇到过或者用过的方案。 水平居中 1. 内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。这种方法对内联元素 inline 、内联块 inline-block 、内联表 inline-table 、 inline-flex 元素水平居中均有效(即行内或类行内元素) text-align: center 2. 块级元素水平居中 margin: 0 auto; 123 //对于一个有固定宽度的块级元素，设置它的`margin-left`、`margin-right`均为autoj即可让元素水平居中margin: 0 auto position + margin 1234567 .son { position: absolute; left: 0; right: 0; width: 固定值; margin: 0 auto;} position + transform 123456 .son { position: absolute; left: 50%; width: 固定值; transform: translateX(-50%);} flex布局 123456 .parent { display: flex;

图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。 下图是理想中的效果图，外部容器的宽度和高度固定，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。 但是实际在浏览器中实现起来的效果并不是很完美，由于各浏览器的解析都各不相同，所以在各浏览器都会有1px-3px的偏差。 方法一： 该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。 HTML结构部分： <div id="box"><span><img src="images/demo.jpg" alt="" /></span></div> CSS样式部分： <style type="text/css">#box{ width:500px;height:400px; display:table; text-align:center; border:1px solid #d3d3d3;background:#fff;}#box span{ display

图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。 下图是理想中的效果图，外部容器的宽度和高度固定，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。 但是实际在浏览器中实现起来的效果并不是很完美，由于各浏览器的解析都各不相同，所以在各浏览器都会有1px-3px的偏差。 方法一： 该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。 HTML结构部分： <div id="box"> <span><img src="images/demo.jpg" alt="" /></span> </div> CSS样式部分： <style type="text/css"> #box{ width:500px;height:400px; display:table; text-align:center; border:1px solid #d3d3d3;background:#fff; } #box span{

方法一： 1、代码： 1 <div style="width:200px;height:200px;border:solid blue;position:relative;"> 2 <div style="width:100px;height:100px;margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: red;"></div> 3 </div> 2、效果图： 方法二： 1、代码： 1 <div style="width:200px;height:200px;border:2px solid #000;display:table-cell;vertical-align:middle;text-align: center;"> 2 <div style="width:100px;height:100px;display:inline-block;"></div> 3 </div> 2、效果图： 方法三： 1、代码： 1 <div style="width:200px;height:200px; border:2px solid #000;display:flex;justify-content:center;align-items:center;"> 2 <div

一、定宽高 1、绝对定位和负margin值： <section class="absolute"> <div></div> </section> <style> section{ display:block; } section.absolute { width: 100px; height: 100px; border: 1px solid #ccc; position: relative; } .absolute div { position: absolute; width: 50px; height: 50px; left: 50%; top: 50%; margin: -25px 0 0 -25px; background-color: yellow; } </style> 2、绝对定位加 transform: <section class="absoluteTransform"> <div></div> </section> <style> section{ display:block; } section.absoluteTransform { width: 100px; height: 100px; border: 1px solid #ccc; position: relative; } .absoluteTransform div { position: