CSS几种水平居中方法

原创 2016年10月15日 03:43:40

基础概念


  • 行内元素:又叫内联元素,英文是inline。<span>、<a>、<label>、 <strong> 和<em> 都是。块状元素也可以通过代码display:inline将元素设置为内联元素。
    • 特点:
      • 和其他元素都在一行上;
      • 元素的高度、宽度及顶部和底部边距不可设置;
      • 元素的宽度就是它包含的文字或图片的宽度,不可改变。
  • 块状元素:<div>、 <p>、<h1>、<form>、<ul> 和 <li> 都是。
    • 特点:
      • 每个块级元素都从新的一行开始,并且其后的元素也另起一行。
      • 元素的高度、宽度、行高以及顶和底边距都可设置。
      • 元素宽度在不设置的情况下,和它父元素的宽度一致)。
    • 分类:
      • 定宽块状元素
      • 不定宽块状元素

行内元素的水平居中

给父元素设置text-align:center 即可。

<div style="text-align:center;">我想要在父容器中水平居中显示。</div>

定宽块状元素的水平居中

设置左右margin值为auto即可。

<div style="width:200px;margin:20px auto;";>我是定宽块状元素,我要水平居中显示。</div>

不定宽块状元素的水平居中

不定宽块状元素的水平居中有3种方法:

方法一.加入 table 标签

  1. 为需要设置的居中的元素外面加入一个 table 标签,包括 <tbody>、<tr>、<td>,这样,元素变为了一个定宽块状元素。
  2. 为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
<body>
<table style="margin:0 auto;">
  <tbody>
    <tr><td>
    <div>我是需要剧中的文本</div>
    </td></tr>
  </tbody>
</table>
</body>

注意:这里<body> 不可以指定长度。

方法二.使用display:inline; 将其改变为行内元素,再设置居中。

<style>
.container{text-align:center;}
.container ul{list-style:none;margin:0;padding:0;display:inline;}
.container li{margin-right:8px;display:inline;}
</style>
</head>

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

方法三.给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50%。

.wrap {
    position:relative;
    float:left;
    left:50%;
}
.wrap-center{
    position:relative;
    float:left;
    left:-50%;
}

<div class="wrap">
    <div class="wrap-center">我是需要居中的元素。</div>
</div>

参考资料:
http://www.imooc.com/code/6365

版权声明:本文为博主原创文章,未经博主允许不得转载。

七种CSS方式让一个容器水平垂直居中

阅读目录 方法一:position加margin  方法二: diaplay:table-cell  方法三:position加 transform  方法四:flex;align-ite...
  • u013063153
  • u013063153
  • 2016年09月18日 10:51
  • 1081

CSS实现居中的7种方法

实现HTML元素的居中 看似简单,实则不然 水平居中比如容易,垂直居中比较难搞定,水平垂直都居中更不容易。在这个响应式布局的年代,很难固定元素的宽高,俺统计了一下,目前至少有六种方法。本文由浅入深逐...
  • chenmoquan
  • chenmoquan
  • 2014年11月28日 15:56
  • 11378

纯CSS完美实现垂直水平居中的6种方式

纯CSS完美实现垂直水平居中的6种方式 时间 2016-07-29 13:12:19 SegmentFault 原文  https://segmentfault.com/a/119...
  • shiyuqiong
  • shiyuqiong
  • 2016年07月30日 22:16
  • 1713

用css实现垂直水平居中的几种方法

1.用line-block和vertical-align来实现居中:这种方法适合于未知宽度高度的情况下。 Title #container{ ...
  • baidu_24024601
  • baidu_24024601
  • 2016年04月12日 11:01
  • 6024

CSS/CSS3 如何实现元素水平居中

先上效果图 图中链接:inline-block元素之间存在空白间距 图中链接:Horizontally Centered Menus with no CSS hacks 实现代码: ...
  • u010758724
  • u010758724
  • 2015年10月22日 20:13
  • 1979

css如何实现图片垂直水平居中

图片的居中显示css有很多方法,但在很多情况下有的方法无效,这是件很头疼的事情,比如一般设置图片属性text-align:centre水平居中,但这个方法经常无效,很多前端攻程师都有研究过或者说是搜索...
  • m0_37290635
  • m0_37290635
  • 2017年03月12日 21:51
  • 314

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { ...
  • freshlover
  • freshlover
  • 2013年09月11日 21:06
  • 324909

[分享] 纯CSS完美实现垂直水平居中的6种方式

前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多,但是都不...
  • ppqiaoping
  • ppqiaoping
  • 2016年07月29日 11:27
  • 1120

经典面试题:如何让DIV水平和垂直居中

CSS让DIV水平居中 说明,本文中所指的DIV包括HTML页面中所有的元素。 让一个DIV水平居中,直接用CSS就可以做到。只要设置了DIV的宽度,然后使用margin设置边距0 auto,CS...
  • zxjiayou1314
  • zxjiayou1314
  • 2015年06月24日 21:36
  • 980

CSS中不定宽块状元素的水平居中显示

慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中, 初始代码如下 设置我所在的...
  • molu_chase
  • molu_chase
  • 2016年08月10日 21:21
  • 3904
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS几种水平居中方法
举报原因:
原因补充:

(最多只允许输入30个字)