文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS如何设置水平和垂直居中

2023-07-04 23:34

关注

这篇文章主要介绍“CSS如何设置水平和垂直居中”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS如何设置水平和垂直居中”文章能帮助大家解决问题。

首先我先创建一个公共的模板样式

<template>  <div class="two">    <div class="parent">      <div class="child">123</div>    </div>  </div></template><style lang="less" scoped>.parent{  margin: 0 auto;  width: 300px;  height: 300px;  border: 1px solid red;  box-sizing: border-box;  .child {    height: 100px;    width: 100px;    background: #2f8df0;  }}</style>

然后具体用到的样式单独写在方法里面,首先先介绍4个平时布局的技巧。

1.水平居中div里面的div,设置子元素的宽度。

.parent{ width:300px;    margin:0 auto;}

注意:如果子元素设置了display:table-cell,那么margin:0 auto;将会失效。

2.设置文字垂直居中,设置包含文字div的高。

.child{    text-align:center    line-height:100px //知道子元素的高,设置和高一样的高度}

3.两个或者多个块级元素垂直居中对齐,父元素设置height和line-height相等。

 .parent{     line-height: 300px; //知道父元素的高,设置和高一样的高度  }   .child1{    display: inline-block;    vertical-align: middle;    line-height: initial;  //initial 关键字用于设置 CSS 属性为它的默认值。   }   .child2{    display: inline-block;    vertical-align: middle;    line-height: initial;  //initial 关键字用于设置 CSS 属性为它的默认值。   }

4.让一个元素充满当前整个容器,设置absolute

.parent{position: absolute;top: 0;bottom: 0;left: 0;right: 0;}

OK,介绍完毕,下面开始介绍CSS实现水平垂直居中的方式。

1.不需要设置子元素的宽高,需要设置父元素的高度。使用 absolute + transform (推荐)

.parent{   position: relative }.child{    position: absolute;    top:50%;    left:50%;    transform:translate(-50%,-50%)}// 备注一下,如果只需要上下居中那就只要保留top,只要左右居中的话就保留left,translate设置   translateY(-50%)或者translateX(-50%)

2.不需要设置子元素的宽高,不需要设置父元素的宽高。 使用flex布局(建议移动端直接使用flex
pc端看需要兼容的情况。)

.parent{  display:flex;  align-items:center;  justify-content:center;}.child{ }

3.不需要设置子元素的宽高,需要设置父元素的高度。使用 lineheight
注意:这种方法需要通过text-align在子元素中将文字显示重置为想要的效果

.parent{    line-height: 300px;  //设置和父元素的高度一样    text-align: center;}.child{    display: inline-block;    vertical-align: middle;    line-height: initial; //initial 关键字用于设置 CSS 属性为它的默认值。    text-align: left;  //将文字显示重置为想要的效果}

4.不需要设置子元素的宽高,需要设置父元素的高度。使用css-table (使用之后此元素的margin:0 auto会失效)

.parent{    display: table-cell;    vertical-align: middle;    text-align: center;}.child{  display: inline-block;}

5.设置子元素的宽高,设置父元素的高度。 使用absolute + 负margin

.parent{   position: relative }.child{    position: absolute;    top: 50%;    left: 50%;    margin-left: -50px; //知道子元素的宽高    margin-top: -50px;  //知道子元素的宽高}

6.设置子元素的宽高,设置父元素的高度。使用 absolute + margin auto

.parent{   position: relative }.child{    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    margin: auto;}

7.设置子元素的宽高,设置父元素的高度。 使用 absolute + calc(这种方法兼容性依赖calc的兼容性)

.parent{   position: relative }.child{    position: absolute;    top: calc(50% - 50px);    left: calc(50% - 50px);}

8.使用writing-mode(使用起来比较复杂,不推荐)

 //公共的样式在最上面 <div class="parent">      <div class="box-child">        <div class="child">123</div>      </div>    </div>
.parent{     writing-mode: vertical-lr; //改变文字显示的方向    text-align: center;}.box-child{    writing-mode: horizontal-tb;    display: inline-block;    text-align: center;    width: 100%;}.child{    text-align: left; //将文字显示重置为想要的效果    margin: 0 auto;}

9.不需要设置子元素的宽高,不需要设置父元素的宽高。 使用grid布局(不建议使用,目前兼容性不是很好)

.parent{    display: grid;}.child{     align-self: center;     justify-self: center;}

10.使用table布局(纯粹凑方法,这年头,谁还用table布局呀,哈哈哈哈)

<table>    <tbody>        <tr>            <td class="parent">                <div class="child">123</div>            </td>        </tr>    </tbody></table>
.parent{    text-align: center;}.child{    display: inline-block;}

css的三种引入方式

1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""。

2.内嵌样式,就是将CSS代码写在之间,并且用进行声明。

外部样式,其中链接样式是使用频率最高,最实用的样式,只需要在之间加上就可以了。其次就是导入样式,导入样式和链接样式比较相似,采用@import样式导入CSS样式表,不建议使用。

关于“CSS如何设置水平和垂直居中”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯