css居中布局

最新推荐文章于 2024-06-05 18:34:39 发布
最新推荐文章于 2024-06-05 18:34:39 发布
阅读量53 收藏
点赞数
文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39860122/article/details/123597527
版权

行内元素水平居中：text-align: center

块级元素水平居中：margin: 0 auto

<!-- 水平垂直居中 -->
  <style>
    .parent {
      width: 600px;
      height: 300px;
      border: 1px solid red;
      position: relative;
      
    }
    .child {
      width: 300px;
      height: 150px;
      border: 1px solid green;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
  </style>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
<!--兄弟元素水平垂直居中 -->
  <style>
    .parent {
      width: 600px;
      height: 300px;
      border: 1px solid red;
      
    }
    .child {
      width: 300px;
      height: 150px;
      border: 1px solid green;
      line-height: 150px;
      display: inline-block;
      vertical-align: middle;
    }
    .brother {
      height: 100%;
      width: 2px;
      background: pink;
      display: inline-block;
      vertical-align: middle;
    }
  </style>
  <body>
    <div class="parent">
      <div class="child"></div>
      <div class="brother"></div>
    </div>
  </body>

 

 <!--元素水平垂直居中 -->
  <!-- translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。
  当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
  translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 -->
  <style>
    .parent {
      width: 600px;
      height: 300px;
      border: 1px solid red;
      position: relative;
      
    }
    .child {
      width: 300px;
      height: 150px;
      border: 1px solid green;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  </style>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>

 

qq_39860122
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css label 居中布局_详解 CSS 居中布局技巧
weixin_39920629的博客
12-22 1250
水平居中元素：通用方法，元素的宽高未知方式一：CSS3 transform.parent {position: relative;}.child {position: absolute;left: 50%;transform: translateX(-50%);}方式二：Flex 布局.parent {display: flex;justify-content: center;}适用于子元素为浮动...
CSS居中布局方法（文字、盒子、图片）
qq_44690237的博客
08-12 2754
前段时间听学长讲他面试的经历，他提到了我最关心的——面试题。其中有一道是写出居中的十种方法，不禁反问自己“能否写出？”......希望以下文章可以帮到需要的小可爱们。
CSS居中布局
雨的印记的博客
12-28 1012
CSS居中布局 水平居中元素： 通用方法，元素的宽高未知 方式一：CSS3 transform .parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); } 方式二：Flex 布局 .parent { display: flex; justify-content: center; } 适用于子元素为浮动，绝对定
div css布局怎么居中,如何实现div+css居中布局
weixin_39620197的博客
08-04 670
我们在设计网页时，首先需要确定网页主体内容如何布局。纵观各大网站，网页主体内容布局一般都采取居中浏览器的方式。我们课课家的首页也不例外。那么如何使用css让整个网页布局居中呢？其实方法很简单，下面小编就为大家介绍一下。要设置网页主体内容居中，我们只需简单两步就可以实现：第一步：对body设置CSS内容居中样式，代码为:body{text-align:center}第二步:对最外层对象设置margi...
html整体布局居中,DIV+CSS居中布局条件与CSS布局居中代码
weixin_42522912的博客
05-30 245
DIV+CSS居中布局条件与CSS布局居中代码一、让DIV+CSS网页布局居中分析介绍 - TOP一般网页主体内容布局均为居中于浏览器。如DIVCSS5首页(http://www.divcss5.com/)，主体为居中布局。网页布局居中演示截图如何使用CSS让整个网页布局居中呢？布局居中条件是什么呢？首先我们要对body设置css内容居中样式(css text-align:center)...
6种方法实现css布局水平居中
web前端开发博客
07-02 5159
说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中的6种方法。 方法一：margin + width 1 2 3 4 5 6 7 8 9 10 11 ...
css 设置布局居中,CSS各种居中布局方法汇总
weixin_31826879的博客
08-03 634
本篇文章讨论居中情况设定为总宽度不定,内容宽度不定的情况。(改变大小时，仍然居中)。特别说明：在元素设置position:absolute;来设置居中效果时，除去博客下介绍的css3方法外，还可以使用负的margin来居中，这样解决了兼容性的问题，但是只适用于宽高已知的情况(因为负的偏移量为元素宽高的一半)。宽高改变时，不再是居中效果。在这些布局中的子元素，因为其属性设置，都默认为内容宽度。本文所...
css：居中的几种布局方式
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
11-09 954
基础知识要记牢~
Css居中布局（除flex） 总结
qq_38253873的博客
03-18 814
Css居中布局 总结 水平方向居中 1.text-align:center （父元素）+display:inline-block(子元素) 优点： 浏览器兼容性比较好（语法都是css2） 缺点： Text-align属性具有继承性，导致子级元素文本也是居中布局的 （需要单独再设置子元素） 2.display:table/block + margin:0 auto（子元素） 优点： 只需要对子级元素...
css label 居中布局_CSS居中的方法总结
weixin_39559804的博客
12-22 1696
CSS水平和垂直居中在开发中经常用到，在此加以总结。水平居中方法1.行内元素水平居中，设置父元素的text-align: center。center#box{text-align:center;}常用的行内元素有a、abbr、b、br、em、input、label、select、span、strong、sub、sup、textarea等。2.宽度固定的块级元素水平居中，设置该元素的marg...
html+css居中布局公司html网站模板
04-02
html+css居中布局公司html网站模板
CSS布局居中
11-20
css中居中是最常用的布局，所以总结了一下，基本涵盖日常所有的方式
CSS各种居中布局方法汇总
09-24
主要针对CSS各种居中布局方法为大家进行详细汇总，感兴趣的小伙伴们可以参考一下
css三角形、居中、圣杯布局
09-01
css三角形、居中、圣杯布局
CSS实现一个雨滴滑落效果
云加速
05-28 1636
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
css系列：进度条
最新发布
zkx529的博客
06-05 163
样式部分为笔者需求的样式，需要根据自己项目需要调整。！！有个问题是偶发性绑定事件不触发，暂时还没解决，欢迎大家帮忙解决。
积累常用css
Study_Live_Sun的博客
06-04 237
1、封面文字，垂直居中，可以两列并排。2、宽border效果。
CSS（盒子模型，定位，浮动，扩展）
m0_57463864的博客
06-04 1233
*绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移*/绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移。设置外边距 - 下边距。设置外边距 - 右边距。设置外边距 - 左边距。设置外边距 - 上边距。
【vue2+css】实现球内波浪百分比效果
XujiRe的博客
06-04 323
vue+css实现球内波浪百分比效果，自定义波浪高度，实现球形波浪进度
css垂直居中页面布局
11-15
实现CSS垂直居中页面布局的方法有很多，以下是其中的两种方法： 1.使用flexbox布局 可以使用flexbox布局来实现CSS垂直居中页面布局。具体实现方法如下： ```css .container { display: flex; align-items: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值