Html与Css---居中-CSDN博客

本文链接：https://blog.csdn.net/PXM706120/article/details/84744521

1.水平居中

1).行内元素:
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

如下代码：

html代码：

<body>
  <div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中显示。</div>
</body>

css代码：

<style>
    div.txtCenter{
    text-align:center;
   }
</style>

2).定宽块状元素:
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中;

html代码：

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

css代码：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/  
    width:500px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>

也可以写成：

margin-left:auto;
margin-right:auto;

注意：元素的“上下 margin” 是可以随意设置的。

3).不定宽块状元素:
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：
a.加入 table 标签;
b.设置 display;inline 方法;
c.设置 position:relative 和 left:50%;

2.垂直居中

1).父元素高度确定的单行文本：

<div class="container">
   hi,imooc!
  </div>

css代码：

<style>
  .container{
   height:100px;
   line-height:100px;
   background:#999;}
  </style>

2).垂直居中方法:
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
table td{height:500px;backgroud:#ccc}

方法二：

　对支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle来实现居中，对不支持display:table-cell的ie6和ie7，使用特定格式的hack。