css 实现居中的五种方式

一、文字居中 1 固定容器高度的单行文本垂直居中：height=line-height

　　　　 2 未知容器高度的文本垂直居中：设定padding,使上下的padding值相同即可

　　　 3 固定容器高度的多行文本垂直居中：让<div>模拟<table>使用vertical-algin

　　　　　父容器 #wrap{

　　　　　　　　　　　　　　display:table

　　　　　　　　　　　　}

　　　　　子容器 #content{

　　　　　　　　　　　　　vertical-algin:middle;

　　　　　　　　　　　　　 display:table-cell;

　　　　　　　　　　　　}

二、图片居中 垂直居中一张图片 vertical-align:middle;

三、

1 html:<div id="parent">
 <div id="child">Content here</div>  </div> css :#parent {position: relative;}  #child { position: absolute;top: 50%;left: 50%;height: 30%;width: 50%;margin: -15% 0 0 -25%; }2 html:<div id="parent"> <div id="child">Content here</div> </div> css:#parent {padding: 5% 0;} #child {padding: 10% 0;}

四、 元素高宽已知.#parent{width:600px;height:400px;position:absolute;left:50%;top:50%;margin-top:-200px;margin-left:-300px;}

五、 元素高宽未知（使用css3的属性，会出现兼容问题）#parent{ width:600px;height:400px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)
}

转载于:https://www.cnblogs.com/bingerger/p/6546039.html

css 实现居中的五种方式相关推荐

详解 CSS position定位的五种方式
position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). 常见的固定定位,例如手机端的导航,快捷按钮.例如本站的&quo ...
CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
css文本居中的几种方式
为什么80%的码农都做不了架构师?>>> 行内元素还是块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素一.左右居中 1.行内元素: 常用的inline元素有 ...
CSS 五种方式实现 Footer 置底
CSS 五种方式实现 Footer 置底页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网 ...
网页设计的css样式,网页设计引入CSS样式的五种方式_css
一.使用STYLE属性将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; -} 例如: <TD ...
CSS元素上下左右居中的几种方式
CSS元素上下左右居中的几种方式假设以以下父子元素实现上下左右居中为例: <div class='father'><div class='son'></div> ...
图文对齐居中的几种方式
总结图文居中的几种方式 1.方法一 css #target{ width: 150px; border:1px purple solid; line-height: 40px; text-indent ...
《div图层被鼠标划过时其背景色变色的五种方式》
概述: 同样是为了提高用户体验程度,本篇内容将叙述:div图层被鼠标划过时其背景色改变,鼠标离开相关div图层时其颜色变为原来的颜色.实现上述效果下面总结了五种实现方式,请您耐心阅读,或许会有点收获. ...
CSS 实现居中的几种方法
**CSS 实现居中的几种方法** 一.前言二.常见的方法方法一:margin和width实现方法二:inline-block和父元素text-align 方法三:浮动实现水平居中方法四:绝对 ...

css 实现居中的五种方式

css 实现居中的五种方式相关推荐

最新文章

热门文章