面試：div水平垂直居中方案--img自適應

阿新 • • 發佈：2020-10-14

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>垂直居中--圖片自適應寬高</title>
        <style type="text/css">
            /* 方法一 定位 為了看效果就加上了背景 寬高*/ 
            .wrap{
                position: relative;
                width: 200px;
                height 
: 200px;
                background: #000;
            }
            .box{
                position: absolute;
                top: 50%;
                left: 50%;
                background: #999; 
                width: 100px;
                height: 100px;
                transform: translate(-50%,-50%);
            } 

            /* 方法二 flex佈局 */
            .wrap{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 200px;
                height: 200px;
                background: #000;
            }
            .box{
                background 
: #999;
                width: 100px;
                height: 100px;
            }
            /* 圖片自適應寬高 */
            img{
                max-width: 100%;
                max-height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box">
                <img src="https://f11.baidu.com/it/u1=2936607031&u2=3595029289&fm=76" >
            </div>
        </div>
    </body>
</html>

面試：div水平垂直居中方案--img自適應

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title>垂直居中--圖片自適應寬高</title>

讓div水平垂直居中的幾種方法

結構層 <div class=\'container\'> <div>123</div> </div> 樣式層 .container{ width: 500px;

單個div水平垂直居中的方式

話不多說先上要實現的效果：（很簡單水平居中） <!DOCTYPE html> <html> <head>

掌握盒子水平垂直居中方案

技術標籤：前端面試總結html5 掌握盒子水平垂直居中方案定位三種display:flex（注意：不相容，移動端常用）JavaScript方式display:table-cell（本身控制文字，若要用要求父級要有固定寬高）

【每日一題】怎麼讓一個 div 水平垂直居中？

技術標籤：每日一題css 怎麼讓一個 div 水平垂直居中？例如有一個父子div如下：

使一個div水平垂直居中

利用定位其原理是通過postion 的 relative/absolute 來進行定位其有以下的不同屬性

div水平垂直居中

<div class=\"parent\"><div class=\"child\"></div></div> 1、定位 div.parent {

彭先生：談談CSS實現水平垂直居中佈局的方法

最近面試的時候，面試官問到了CSS水平垂直居中佈局的方式，對於剛入前端沒多久的我，無疑是一臉懵逼，閒了趕緊查閱資料分析一波，給各位分享一下，避免落坑。

css3 flex實現圖片大於div時自動裁剪保持水平垂直居中不變形

<div class=\"page-product-list\"> <div class=\"thumbnail\"> <div class=\"img\"> <img src=\"https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg\">

【CSS三種居中方案全解】CSS水平垂直居中常用方法集結

技術標籤：筆記CSS前端定位htmlcss3csshtml5 目錄前言CSS水平垂直居中參考資料系列文章

普歌-赤道團隊：文字，圖片，行內塊元素/塊級元素水平/垂直居中合集(內容較多，建議收藏)

技術標籤：cssHtmlhtmlcssflexless 在html學習或網頁開發中，會遇到需要設定水平居中的場景，但不同型別的元素水平/垂直居中有不同書寫格式或者程式碼，現在我來盤點一下：

div盒子水平垂直居中的方法

關於盒子居中的這個問題下面是我總結的幾種方式希望能幫助到大家一、盒子沒有固定的寬和高

css水平垂直居中幾種方法？

首先我們規定兩個div，為父子級別，後面各個案例都是基於 1 <div class=\"parent\">

利用絕對定位實現水平垂直居中

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

實現元素水平垂直居中的四種方法

讓元素水平垂直居中的四種方法前言一、使用 transform 與 position 結合二、使用 position 定位和偏移屬性

CSS 讓元素水平垂直居中的好辦法

一、行內元素（文字、圖片等）水平垂直居中 1、行內元素水平居中父容器設定:

盒子水平垂直居中10種方法

盒子水平垂直居中10種方法 HTML程式碼 <body> <div id="container"> <div id="box"></div>

CSS 水平垂直居中

水平垂直居中定位 1.百分比，知道具體寬高讓盒子距離左上50%，然後向左上移動一半的距離

常見的水平垂直居中方法

方法一: 　　絕對定位方法：不確定當前div的寬度和高度，採用transform:translate(-50%,-50%); 當前div的父級新增相對定位（position: relative;）

子元素在父元素中水平垂直居中的幾種方式

子元素、父元素HTML結構如下： <div class=\"wrapper\"> <div class=\"inner\"></div>