css元素动态高度水平垂直居中

约定不等于承诺〃 2022-12-07 12:07 210阅读 0赞

在**明确宽高尺寸**情况下，实现水平垂直居中方法：  
1、使用固定定位

.div{ 
    	width: 300px;
    	height: 100px;
    	background:#fff;
    	position: fixed;
    	top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

2、使用相对定位与绝对定位

<div class="div1">
        <div class="div2"></div>
    </div>

.div1{ 
    	position: relative;
    }
    .div2{ 
    	position: absolute;
    	top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 300px;
    	height: 100px;
    }

在 **未明确** 高度尺寸情况下，实现水平垂直居中方法：  
1、使用transform: translate

.div { 
       	position: fixed;
       	top: 50%;
      	left: 50%;
       	transform: translate(-50%,-50%);
        margin: auto;
    	width: 300px;
    }

2、使用弹性布局

<style> .div1{ display: flex; justify-content: center; align-items: center; margin: auto; width: 300px; height: 100%; } .div2{ background:#fff; } </style>
    <div class="div1">
        <div class="div2"></div>
    </div>

**最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！**

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关居中一个元素(水平+垂直居中)

我们的示例代码全在此基础上修改： ...... <style> { margin: 0;

末蓝、/ 2023年10月15日 10:44/ 0 赞/ 56 阅读

相关 css水平垂直居中

css水平垂直居中方法总结，简单明了水平居中对于行内元素(inline)：text-align: center; 对于块级元素(block)：设置宽

r囧r小猫/ 2023年06月10日 10:29/ 0 赞/ 12 阅读

相关 CSS垂直水平居中

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

快来打我*/ 2023年01月14日 12:58/ 0 赞/ 198 阅读

相关 [CSS]元素水平垂直居中方法

1）父元素设置display:flex; justify-content:center; align-items:center; 2）元素position:absolute

刺骨的言语ヽ痛彻心扉/ 2022年12月08日 01:58/ 0 赞/ 179 阅读

相关 css元素动态高度水平垂直居中

在明确宽高尺寸情况下，实现水平垂直居中方法： 1、使用固定定位 .div{ width: 300px; height: 100px;

约定不等于承诺〃/ 2022年12月07日 12:07/ 0 赞/ 211 阅读

相关 [CSS]垂直水平居中

垂直水平居中两种实现方式： 1. .box{ width:200px; height: 200px; backgrou

约定不等于承诺〃/ 2022年11月26日 04:58/ 0 赞/ 317 阅读

相关 CSS水平垂直居中

在实际前端开发中，我们会遇到让一些元素居中的情况，如水平居中、垂直居中或者水平垂直居中等等。CSS的表示方法有很多，现在小编在这里总结一下，以便开发的时候可以快

不念不忘少年蓝@/ 2022年11月12日 08:18/ 0 赞/ 339 阅读

相关 CSS垂直水平居中方式大全(二)----水平垂直居中

1.利用绝对定位+transform(不固定宽高水平垂直居中) 示例: <!DOCTYPE html> <html> <head>

ゞ浴缸里的玫瑰/ 2022年06月04日 02:09/ 0 赞/ 439 阅读

相关 CSS垂直水平居中方式大全(一)----水平居中-垂直居中

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。一、水平居中

冷不防/ 2022年06月04日 01:53/ 0 赞/ 463 阅读

相关 css实现元素水平垂直居中

1.绝对定位，利用负边距利用负边距实现子元素居中(相对于父元素(position:relative))，需已知子元素的width与height；且把子元素的positi

刺骨的言语ヽ痛彻心扉/ 2021年09月18日 16:12/ 0 赞/ 437 阅读