盒子進行水平垂直居中transform+position，input框的下拉按鈕的設計，transform的2D轉換以及transition過渡效果應用

阿新 • • 發佈：2021-01-31

技術標籤：css3 例項 css css3

效果如圖：
在這裡插入圖片描述
程式碼展示：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: #999999;
        }
        
        .text {
            position 
: absolute;
            top: 50%;
            left: 50%;
            height: 25px;
            width: 200px;
            border: 1px solid #333333;
            /* 
            相對於自身寬或者高的移動，距離為：寬/2、高/2，
            可以讓盒子進行水平垂直居中，
            不用設定margin-left或者margin-right.
             */
            transform 
: translate(-50%, -50%);
        }
        .text::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 11px;
            width: 8px;
            height: 8px;
            cursor: pointer;
            /* 三角設計 */
            border-bottom: 1px solid #030303; 

            border-right: 1px solid #030303;
            /* 讓三角進行旋轉45度，下拉模式 */
            transform: rotate(45deg);
            /* 過渡效果 */
            transition: all .3s ease;
            /* 設定旋轉中心 */
            transform-origin: center;
        }
        
        .text:hover::after {
            /* 滑鼠放在三角時旋轉，進而呈現上拉模式 */
            transform: rotate(225deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="text"></div>
    </div>
</body>

如有不懂得或者想要和小編進行探討相關問題的大佬，可以在下面討論哈~

盒子進行水平垂直居中transform+position，input框的下拉按鈕的設計，transform的2D轉換以及transition過渡效果應用

技術標籤：css3例項csscss3 效果如圖：程式碼展示： <style> * { margin: 0; padding: 0;

00029-layui 表格table 操作列支援下拉按鈕(選單)，多級下拉按鈕(選單)，dropdown

用到dropdown 控制元件：地址： http://test.microanswer.cn/page/dropdown.html 引入css,js: <link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/dropdown.css" media="all&

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

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

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

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

【HTML+CSS】實現小盒子水平垂直居中大盒子

技術標籤：web前端csshtml基礎大前端csshtmlcss3html5 小div在大div中如何水平垂直居中關於如何設定小盒子在大盒子裡面水平垂直方向同時居中的實現方法有很多種，下面僅列舉了常用的幾種。首先看一下要實現的

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

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

css盒子水平垂直居中

盒子居中的方法如下要實現的效果圖：水平垂直居中 1、定位的方式父盒子設定相對定位，子盒子設定絕對定位

css實現盒子水平垂直居中--3種常用方法

需要居中顯示的子盒子 <body> <div class=\"box\">我要居中顯示</div> </body>

一個小盒子在一個大盒子裡做水平垂直居中

①內邊距；②外邊距；③小盒子轉換成行內塊元素再結合vertical-align；④絕對定位；⑤絕對定位結合margin（定位方位的一半加上margin自身寬高的一半）；⑥絕對定位結合margin（四個方位都設為0，然後將margin設為aut

佈局方式，水平垂直居中的程式碼

第一種方法如果沒有高度是有問題，基本不算一種方式 <div className=\"mxbox\">

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

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

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

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

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

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

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、行內元素水平居中父容器設定:

CSS 水平垂直居中

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

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\">

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

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