1、被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
2、当被设置元素为块状元素时用 text-align：center 就不起作用了。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
3、为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。为这个 table 设置“左右 margin 居中。
4、改变块级元素的 dispaly 为 inline 类型，然后使用 text-align:center 来实现居中效果。
5、通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
6、垂直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
7、使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
8、在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display:table-cell， vertical-align:middle。
如何让某个div居左、居右、剧中
div+css是Web设计标准，它是一种网页的布局方法。与传统中通过表格（Table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。
下面分别对div居左、居右、居中做下代码演示：
div css布局之div左对齐，div+css布局完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>div对齐实例 在线演示 DIVCSS5</title>
<style>
.divcss5-left{float:left;width:250px;height:50px;border:1px solid #F00}
</style>
</head>
<body>
<div class=”divcss5-left”>此DIV靠左对齐显示</div>
</body>
</html>
div css布局之div右对齐，div+css布局完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>div对齐实例 在线演示 DIVCSS5</title>
<style>
.divcss5-right{float:left;width:250px;height:50px;border:1px solid #F00}
</style>
</head>
<body>
<div class=”divcss5-right”>此DIV靠右对齐显示</div>
</body>
</html>
div css布局之div居中对齐，DIV+CSS布局完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>div对齐实例 在线演示 DIVCSS5</title>
<style>
.divcss5-cent{margin:0 auto;width:250px;height:50px;border:1px solid #F00}
</style>
</head>
<body>
<div class=”divcss5-cent”>此DIV居中右对齐显示</div>
</body>
</html>
div+css怎么居左居右剧中
1、居左：
对要靠左对齐（局左）的div样式加float:left。
示例代码：
css部分：
<style>
.divcss5-left{float:left;width:250px;height:50px;border:1px solid #F00}
</style>
HTML部分：
<div class=”divcss5-left”>此DIV靠左对齐显示</div>
2、居右：
对要靠右对齐（局右）的div样式加float:right。
示例代码：
css部分：
<style>
.divcss5-right{float:left;width:250px;height:50px;border:1px solid #F00}
</style>
HTML部分：
<div class=”divcss5-right”>此DIV靠右对齐显示</div>
3、居中：
对要居中对齐的div样式加margin:0 auto，不再需要加float样式。
示例代码：
css部分：
<style>
.divcss5-cent{margin:0 auto;width:250px;height:50px;border:1px solid #F00}
</style>
<div class=”divcss5-cent”>此DIV居中右对齐显示</div>
扩展资料：
CSS清除浮动：
浮动：因为使用了float:left或float:right或两者都是有了而产生的浮动。
对父级设置适合CSS高度：
对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置。
示例代码：
css部分：
.divcss5{ width:400px;border:1px solid #F00;background:#FF0; height:102px}
.divcss5-left,.divcss5-right{width:180px;height:100px;
border:1px solid #00F;background:#FFF}
divcss5-left{ float:left}
.divcss5-right{ float:right}
HTML部分：
<div class=”divcss5″>
<div class=”divcss5-left”>left浮动</div>
<div class=”divcss5-right”>right浮动</div>
</div>
html文字怎么设置居左居中居右？
<div class=”text clearfix” style=”text-align:center;”>
2.<span style=”float:right;”>居右</span><span style=”float:left;”>居左</span>居中
</div>
<table width=”” border=”0″ cellpadding=”0″ cellspacing=”1″ bgcolor=”#CCCCCC”>
<tr>
<td bgcolor=”#FFFFFF” align=”left”>居左</td>
<td bgcolor=”#FFFFFF” align=”center”>居中</td>
<td bgcolor=”#FFFFFF” align=”right”>居右</td>
</tr>
</table>
如何在右边？”>如何在左边？ div>如何在右边？
1、首先新建一个html文件，命名为test.html。
2、然后在test.html文件内，使用div标签创建两行文字，分别为测试一，测试二。
3、接着在test.html文件内，分别给两个div标签添加id属性，分别为test1，test2。
4、在test.html文件内，使用button标签创建一个按钮，给button按钮绑定onclick点击事件，当按钮被点击时，执行yidong()函数。
5、在js标签中，创建yidong()函数，在函数内，通过id(test2)获得第二个div对象，使用after()方法将第一个div移动至第二个div后面。
6、最后在浏览器打开test.html文件，点击按钮，查看实现的效果。