新技能get ---设置垂直居中

<code>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div >
<p>ssss ssss sss sss ssss sss ssssssssssssssssss sss </p>
</div>
</body>
</html>

</code>

<code>
*{
margin:0;
padding:0;
}
div{
width:300px;
height:300px;
text-align:center;
border:1px solid;
position: relative;
}
div p
{
width: 29px;
vertical-align:middle;
display: inline-block;
}
div:before{
content: " ";
display: inline-block;
height: 100%;
width:0;
vertical-align: middle;
}
</code>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 利用绝对定位(absolute)和外边距(margin)说明:这种方式适用子级的宽(width)高(height)...
    萝莉薇阅读 370评论 0 0
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,199评论 0 11
  • 起床时间:05:15 晨间思时间:05:18-06:04 用时:四十五分钟左右 输出:语音8400 关键词:分享;...
    洁_寞碎阅读 109评论 0 0
  • 小时候 你牵着我的手 你说 灰姑娘的水晶鞋 就在某个地方等我拿 小时侯 你牵着我的手 你说 有个英俊的王子 就在某...
    田园执笔阅读 139评论 0 0