[css]元素居中的方案

居中解决方案。
居中是前端经常面临的问题,居中分为水平居中和垂直居中,而以垂直居中更难。

水平居中

行内元素只需要在其父元素上设置text-align: center
即可。
块级元素不仅需要在其父元素上设置text-align: center,还要让它的margin:0 auto;

垂直居中

请移步:vertical-align属性与垂直居中学习笔记

给定宽高的元素居中

1. 绝对定位法+margin:auto
.Center-Container {
  position: relative;
}

.Absolute-Center {
  width: 50%;/**/
  height: 50%;/*自己撑开也行,不一定是50%*/
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

[水平居中]块状元素

利用:margin:0 auto;水平居中

这些问题自己都要会答

各种情况的居中

一些自认为是不优雅的方法记录

  1. 负边距
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <style type="text/css" media="screen">
    html,body{
        height:100%;
        width:100%;
        padding:0;
        margin:0;
    }
    .floater{
        height: 50%;
        margin-bottom: -70px;
            background:transparent;
    }
        .target{
            background: blue;
            height: 140px;
        }
    </style>
    <div class="floater"></div>
    <section class="target"></section>
</body>
</html>

参考文献

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 12,528评论 3 30
  • 在页面布局中,居中在各种各样的场景中广泛被用到,也经常被新人提及。以前做过一些自己探索居中问题的demo,今天翻出...
    彬_仔阅读 2,622评论 0 6
  • 春的雨缠绵着干涸的大地 水气弥漫充斥着鼻腔 燃一支香 冲一杯茶 听一曲静水流深古琴乐 想着那个曾坐在我对面的你 这...
    冰比冰水冰222阅读 1,215评论 0 0
  • 1. 2012年9月29日 日出東方紅彤彤, 月圓中秋悲切切。 游子他鄉更思家, 短短距離何時休?
    桓舟子阅读 1,267评论 0 1