元素水平居中、垂直居中

Matcha_ice_cream

已于 2022-03-22 18:34:25 修改

阅读量209

点赞数

分类专栏： # css 文章标签： css css3 html

于 2022-01-14 15:43:40 首次发布

本文链接：https://blog.csdn.net/Matcha_ice_cream/article/details/122495732

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

水平、垂直居中

1. 水平居中
- （1）块级元素
- （2）行内块、行内元素
2、垂直居中

1. 水平居中

（1）块级元素

对块元素进行水平居中：
使用margin，设置 左右外边距为auto ;

注意：块级盒子必须指定了宽度

代码演示：

<style>
  div {
    width: 200px;
    height: 100px;
    background-color: palegoldenrod;
    margin: 0 auto;
  }
</style>
<body>
  <div>hi!!!</div>
</body>

显示效果：
在这里插入图片描述

（2）行内块、行内元素

行内或者行内块元素水平居中：
给 父元素 添加 text-align:center 属性

代码编写：

<style>
  div {
    width: 200px;
    height: 100px;
    background-color: palegoldenrod;
    text-align: center;
  }
</style>
<body>
  <div>
    <span>hello,java</span>
    <input type="text">
  </div>
</body>

显示效果：
在这里插入图片描述

2、垂直居中

（1）单行文字垂直居中：

line-height = height（height为盒子的高度）

示例展示：

/**html代码**/
<parent>
    <child>I am child</child>
</parent>

/**css样式**/
  parent {
    width: 100px;
    height: 100px;
    display: block;
    background-color: cadetblue;
  }
  child {
    line-height: 100px; 
  }

显示效果：
在这里插入图片描述

（2）使用table、table-cell进行垂直居中

/**html代码**/
<parent>
    <child>I am child</child>
</parent>

/**css样式**/
  parent {
    display: table;
    background-color: burlywood;
    height: 100px;
    width: 200px;
  }
  child {
    display: table-cell;
    vertical-align: middle;
  }

显示效果：
在这里插入图片描述

（3）使用flex进行垂直居中

/**html代码**/
<parent>
    <child>I am child</child>
</parent>
/**css样式**/
parent {
    display: flex;
    align-items: center;
    background-color: aquamarine;
    height: 100px;
    width: 200px;
  }

显示效果：
在这里插入图片描述

（4）使用relative、transform进行垂直居中

/**html代码**/
<parent>
    <child>I am child</child>
</parent>
/**css样式**/
  parent {
    position: relative;
    display: block;
    width: 200px;
    height: 100px;
    background-color: brown;
  }
  child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /*向上移动自身高度的一半*/
  }

显示效果：
在这里插入图片描述

Matcha_ice_cream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素水平居中、垂直居中

水平居中1. 水平居中（1）块级元素（2）行内块、行内元素1. 水平居中（1）块级元素对块元素进行水平居中：使用margin，设置左右外边距为auto;注意：块级盒子必须指定了宽度代码演示：<style> div { width: 200px; height: 100px; background-color: palegoldenrod; margin: 0 auto; }</style><body> <
复制链接

扫一扫

专栏目录