一、块级元素水平居中

HTML代码：div为父级盒子，span为内容盒子。

<body><div id="box"><span></span></div>
</body>

CSS代码：第一种方法，设置span盒子的左右边距自适应。

    #box{width: 300px;height: 300px;border: 10px solid #ccc;}#box span{display: block;width: 50px;height: 50px;background-color: red;margin: 0 auto; }

效果图如下：

CSS代码：第二种方法，span盒子绝对定位脱离文档流，在自身左侧填充父级宽度的百分之五十，再减去自身宽度的一半。

#box{width: 300px;height: 300px;border: 10px solid #ccc;position: relative;}
#box span{display: block;width: 50px;height: 50px;background-color: red;position: absolute;left: 50%;margin-left: -25px; }

效果图如下：

二、行内块级元素水平居中

HTML代码：div为父级盒子，span为内容盒子。

<body><div id="box"><span>水平居中</span></div>
</body>

CSS代码：行内块元素拥有行内元素特性可以使用文本属性直接居中

#box{width: 300px;height: 300px;border: 10px solid #ccc;text-align: center;}
#box span{display: inline-block;width: 50px;height: 50px;background-color: red;}

效果图如下：

三、单行文本居中

HTML代码：

<body><h1>文字文字文字文字文字文字文字文字文字文字字</h1>
</body>

CSS代码：

h1{margin: 0;padding: 0;height: 100px;border: 1px solid red;line-height: 100px;
}

效果图如下：

四、多行文本不固定高度垂直居中

HTML代码：

<body><h1>就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发就发</h1>
</body>

CSS代码：

h1{margin: 0 auto;padding: 0;width: 400px;border: 1px solid red;background-color: #ccc;padding: 200px;
}

效果图如下：

五、多行文本不固定高度垂直居中

HTML代码：

<body><div id="aa"><h1>就发就发就发就发就发就发就发就发就发就发发就发就发就发就发就发就发就发就发就发就就发就发就发就发就发就发就发就发就发就发 </h1></div>
</body>

CSS代码：

* {margin: 0;padding: 0;
}
#aa {width: 500px;height: 500px;margin: 0 auto;border: 1px solid red;display: table;  /* 成为一个块级的表格元素 */
}
h1 {border: 1px solid green;background-color: #ccc;display: table-cell;    /* 使元素成为表格的单元格 */vertical-align: middle;
}

效果图如下：

六、块级元素的水平垂直居中---固定高度

HTML代码：

<body><div id="box"></div>
</body>

CSS代码：

#box{width: 300px;height: 300px;background-color: #ccc;position: absolute;left: 50%;top: 50%;margin-left: -150px;margin-top: -150px;
}

效果图如下：

六、块级元素的水平垂直居中---不固定高度

HTML代码：

<body><div id="box">块级不固定高度</div>
</body>

CSS代码：

#box{padding: 20px;background-color: #ccc;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

效果图如下：

html中元素的几种居中方法相关推荐

php页面底部信息居中,css底部如何局中？css三种居中方法
本篇文章给大家带来的内容是关于css底部如何局中?css三种居中方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 某天组长让我改一个表格的样式,要求底部局中.当时想很简单的嘛,哼哧 ...
解析Jquery取得iframe中元素的几种方法
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下 DOM方法:父窗口操作IFRAME:window.frames[&quo ...
Jquery取得iframe中元素的几种方法（转载）
Jquery取得iframe中元素的几种方法(转载) iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME: ...
Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID，反之也行！...
query取得iframe中元素的几种方法在iframe子页面获取父页面元素代码如下: $('#objId', parent.document); // 搞定... 在父页面获取iframe子页 ...
Javascript循环删除数组中元素的3种方法
本文主要跟大家分享了关于Javascript循环删除数组中元素的几种方法,分享出来供大家参考学习,下面与微点阅读小编一起来看看详细的介绍: 问题大家在码代码的过程中,经常会遇到在循环中移除指定元素的 ...
python中的pandas的两种基本使用_pandas中join()的两种应用方法
pandas中join()方法很神奇,join()方法虽然是连接方法,但是因为pandas有两个数据结构,join()方法针对两个数据结构有着不同的连接方法:1.根据指定的分隔符将Series中的各个 ...
多iframe下的html同名id,获得同级iframe页面的指定ID元素的几种实现方法
1.JS实现: var object= window.parent.frames("要获得的iframe的name").contentDocument.getElementById ...
python list方法说明_对python中list的五种查找方法说明
Python中是有查找功能的,五种方式:in.not in.count.index,find 前两种方法是保留字,后两种方式是列表的方法. 下面以a_list = ['a','b','c','hell ...
python list find函数_对python中list的五种查找方法说明
Python中是有查找功能的,五种方式:in.not in.count.index,find 前两种方法是保留字,后两种方式是列表的方法. 下面以a_list = ['a','b','c','hell ...
jsp页面中include的两种使用方法
jsp页面中include的两种使用方法 include有两种用法 <%@ include file="文件的绝对路径或者相对路径"%> <jsp:include ...

html中元素的几种居中方法

一、块级元素水平居中

二、行内块级元素水平居中

三、单行文本居中

四、多行文本不固定高度垂直居中

五、多行文本不固定高度垂直居中

六、块级元素的水平垂直居中---固定高度

六、块级元素的水平垂直居中---不固定高度

html中元素的几种居中方法相关推荐

最新文章

热门文章