css 未知宽高的元素实现水平方垂直居中

最新推荐文章于 2024-04-03 04:37:24 发布
最新推荐文章于 2024-04-03 04:37:24 发布
阅读量204 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jingge_nihao/article/details/80410037
版权
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>


<style type="text/css">
.parent{
display: table;
height:300px;
    width: 300px;
    background-color: #FD0C70;
}
.child{
display: table-cell;
vertical-align: middle;
font-size: 16px;
color: #fff;
text-align: center;
}
</style>
<body>
<!-- 方法一：父元素dispaly:table,子元素display:cell-table。 -->
<!-- 优势：父元素可以动态改变高度。
劣势：table属性容易造成多次reflow,IE8以下不支持 -->
<div class="parent">
    <div class="child">DEMO</div>
    </div>








    <style type="text/css">


    .par1{
    position: absolute;
    width: 500px;
    height: 500px;
    background: red;
    text-align: center;
    }
    .child1{
   
    background: pink;
    color: #fff;
    display: inline-block;


    }
    .par1:after{
    display: inline-block;
    content: "";
    width: 0;
    height: 100%;
    vertical-align: middle;
    }


    </style>
    <!-- 方法二：利用空元素或伪类  优点：兼容性好-->
     <div class="par1">
      <div class="child1">
      <p>你若暗火，便是晴天哈哈哈哈哈</p>
      <p>啦啦啦啦</p>
      </div>
     </div>




     <style type="text/css">
      .p3{
      position: relative;
      height:300px;
    width: 300px;
    background: #FD0C70;
      }
      .c3{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      color: #fff;


      }
     </style>


     <!--方法三：绝对定位+transform  优点：方便，支持webkit内核
缺点：transform兼容性差，IE9以下不支持 -->
     <div class="p3">
      <div class="c3">
      <p>你若暗火，便是晴天哈哈哈哈哈</p>
      <p>若果没有面试，就海投吧</p>
      </div>
     </div>

<style type="text/css">
.p4{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
    height:300px;
    background: #FD0C70;
}
.c4{
color: #fff;
}
</style>
<!-- 方法4:flexbox布局  优点：方便
缺点：兼容性不好,IE支持很差 -->
<div class="p4">
      <div class="c4">
      <p>你若暗火，便是晴天哈哈哈哈哈</p>
      <p>若果没有面试，就海投吧</p>
      </div>
     </div>
</body>
</html>
昵称已被占用了了了了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS未知宽度高度居中对齐三种最优解决方案
09-19 865
三种最优的 未知宽高元素的居中对齐方式!!!
Css元素水平垂直居中的方式
m0_65558076的博客
04-14 342
一、背景 在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素 居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法分成两个大类： 居中元素（子元素）的宽高已知 居中元素宽高未知 二、实现方式 实现元素水平垂直居中的方式： 利用定位+margin:auto 利用定位+margin:负值 利用定位+transform table布局 fl...
CSS——未知宽高元素的水平垂直居中的方法
weixin_52796953的博客
03-21 1323
css中经常会使用到对未知宽高元素实现水平居中的效果，此篇文章总结了常用的几个对未知宽高元素实现水平垂直居中的方法。
CSS关于实现当父元素宽高未知时，内容的居中
bnatn的博客
07-29 105
关于实现未知宽高的盒子中未知宽高内容的居中问题
css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁
最新发布
2301_79655473的博客
04-03 813
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取91877)**[外链图片转存中…(img-gr2VpjdH-1712090202037)][外链图片转存中…(img-d225AZ2v-1712090202038)][外链图片转存中…(img-p0PTFbxx-1712090202038)][外链图片转存中…(img-7Xb8Yjsk-1712090202038)]
巧用CSS居中未知高度的块元素
weixin_33672400的博客
09-10 67
　　在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题，但是总是有些特殊场景让你无法得心应手的实现居中，本文介绍几种常用的经典的居中方法，总有一种适合你！ 1. position .parent { width: 200px; height: 200px; margin: auto; border: 1px solid red; ...
CSS实现元素水平垂直居中的各种方法
热门推荐
Kotlin0139的博客
07-16 1万+
在设计网页页面的过程中，总会有将元素或者文字进行水平或者垂直居中的要求，各种CSS样式调整，搞的头都大了。这里将会介绍CSS中几种常用到的水平垂直居中的方法，希望能够对你有所帮助。...
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
01-19
下文以span元素为例子，介绍一下如何实现span元素在div中实现水平垂直居中效果，代码如下: <!DOCTYPE html> <html> <head> <meta charset= utf-8> <meta name=author content=...
CSS 实现未知内容高度的垂直水平居中(改良版)
12-11
垂直居中在IE浏览器下的实现比较难实现，而更难实现的应该是未知内容高度的垂直水平居中！还好网上也有很多高人发布了一些解决的方法！这里我进行了一些改良，兼容FF，IE6，IE7，Opera…如发现问题有劳回复评论！ ...
CSS解决未知高度的垂直水平居中自适应问题
09-27
今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE... 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <style> body { text-align:center} #info{ margin:0
CSS未知高度垂直居中的实现
09-22
在CSS布局中，垂直居中是一项常见的需求，尤其当元素的高度未知时，实现起来更具挑战性。本篇文章主要探讨了几种在CSS中实现未知高度元素垂直居中的方法。这些方法在不同浏览器间可能存在兼容性问题，但通过适当的...
CSS 解决未知高度垂直居中实现代码
12-08
) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。 非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。 CSS 复制...
css已知宽高和未知宽高的居中定位
m0_52267483的博客
01-20 1850
1、已知宽高 上图中我们想要对已知宽度的“服务范围”进行左右居中定位，我们可以先选择left或者right样式，这里我们选择的是left，这里的50%指的是这个盒子的最左侧位于左右的百分之五十的地方，也就是中间位置，因为我们知道整体的宽度，所以我们可以直接采用在向左移动宽度的一半，也就是margin-left: -175px;如下图，保存刷新之后就左右居中了。同理，如果已知高度我们也可以采用这种方式进行上下居中。 2、未知宽高 上图的滚动圆点我们就不知道他的长度和宽度，首先还是使它的最左侧位于图片的百
设置未知宽高元素水平垂直都居中的几种方法
qq_59541478的博客
09-01 1856
设置盒子或者元素水平垂直居中是在面试中有可能遇到的问题，本文介绍了几种设置方法
如何实现一个未知宽高元素的水平垂直居中？
归零
04-14 5537
以下是实现未知宽高元素水平垂直居中的三个方法：方法1：通过定位和transform属性来实现html:&lt;div class="parent"&gt; &lt;div class="children"&gt;实现未知宽高元素垂直居中的方法1：通过定位和transform来实现&lt;/div&gt; &lt;/div&gt;css: &lt;style&gt;
CSS未知宽高的元素，水平垂直居中
微光的博客
11-28 611
方法一：使用定位 思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%) 优点：高大上,可以在webkit内核的浏览器中使用 缺点：不支持IE9以下不支持transform属性 &lt;style&gt; .parent{ position: relative; height:300px; ...
CSS未知宽高元素水平垂直居中
码上行动
05-13 315
文章目录方法一：对图片不管用方法二：对图片管用总结 方法一：对图片不管用 父元素：display：table； text-align：center；//水平居中 子元素：display：table-cell； vertical-align：middle；//垂直居中 方法二：对图片管用 vertical-­align垂直居中：top/middle/bottom; 1、只有行内元素设置时管用； 2、需要参照物，且参照物不要换行，紧跟在图片后同行显示； 代码示例： <head
CSS3去除移动端点击元素时产生的高亮背景色
jingge_nihao的博客
11-14 996
在手机浏览器中浏览网页时 ,点击页面中的按钮或者是具备点击事件的元素，就会出现一个默认的高亮框 可以用一个简单的css3属性来解决：tap-highlight-color，最好加上webkit浏览器前缀。 -webkit-tap-highlight-color: rgba(0,0,0,0);/*CSS3去除手机浏览器按钮点击出现的高亮框*/     -webkit-tap-highlight-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值