[分享]css3左右居中对齐

 CSS3中，居中对齐是非常常见的一种布局方式，尤其是在页面布局中。常用的居中对齐方式有水平居中和垂直居中。 本文将着重介绍CSS3中的左右居中对齐。 实现左右居中对齐的两种方法： 1. 使用text...

 CSS3中，居中对齐是非常常见的一种布局方式，尤其是在页面布局中。常用的居中对齐方式有水平居中和垂直居中。
本文将着重介绍CSS3中的左右居中对齐。
实现左右居中对齐的两种方法：
1. 使用text-align:center;
使用text-align:center;可以居中对齐block元素内的所有文本和内敛元素。
例如，下面的代码将一张图片居中对齐：

html
<p style="text-align:center;">
  <img src="example.png" alt="example">
</p> 

以上代码将图片居中对齐，无论宽度为多少。
2. 使用margin:auto;
使用margin:auto;可以水平居中对齐一个块级元素。
例如，下面的代码将一个div居中对齐：

html
<pre>
  <style>
    #example {
      width: 500px;
      margin: 0 auto;
      background-color: #ccc;
    }
  </style>
<br>
  <div id="example">
    <p>这里是内容</p>
  </div> 

以上代码将一个宽度为500px的div居中对齐，其中margin:0 auto;即可实现。
需要注意的是，在使用margin:auto;进行居中对齐时，需要先设置元素的宽度，否则无法居中对齐。
总结：
以上就是CSS3中左右居中对齐的两种实现方法。使用text-align:center;可以居中对齐block元素内的所有文本和内敛元素，而使用margin:auto;可以水平居中对齐一个块级元素。两者各有优缺点，可以根据实际需求自行选择。