1 line
9.7 KiB
JavaScript
1 line
9.7 KiB
JavaScript
"use strict";(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[1906],{3905:function(e,n,t){t.d(n,{Zo:function(){return s},kt:function(){return m}});var r=t(67294);function l(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?a(Object(t),!0).forEach((function(n){l(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function o(e,n){if(null==e)return{};var t,r,l=function(e,n){if(null==e)return{};var t,r,l={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(l[t]=e[t]);return l}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(l[t]=e[t])}return l}var c=r.createContext({}),p=function(e){var n=r.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},s=function(e){var n=p(e.components);return r.createElement(c.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},d=r.forwardRef((function(e,n){var t=e.components,l=e.mdxType,a=e.originalType,c=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),d=p(t),m=l,f=d["".concat(c,".").concat(m)]||d[m]||u[m]||a;return t?r.createElement(f,i(i({ref:n},s),{},{components:t})):r.createElement(f,i({ref:n},s))}));function m(e,n){var t=arguments,l=n&&n.mdxType;if("string"==typeof e||l){var a=t.length,i=new Array(a);i[0]=d;var o={};for(var c in n)hasOwnProperty.call(n,c)&&(o[c]=n[c]);o.originalType=e,o.mdxType="string"==typeof e?e:l,i[1]=o;for(var p=2;p<a;p++)i[p]=t[p];return r.createElement.apply(null,i)}return r.createElement.apply(null,t)}d.displayName="MDXCreateElement"},12344:function(e,n,t){t.r(n),t.d(n,{assets:function(){return s},contentTitle:function(){return c},default:function(){return m},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return u}});var r=t(87462),l=t(63366),a=(t(67294),t(3905)),i=["components"],o={sidebar_label:"\u6837\u5f0f\uff1a\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\u65b9\u6848",sidebar_position:8},c="\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\u65b9\u6848",p={unversionedId:"book4/css-vertical-horizontal-center",id:"book4/css-vertical-horizontal-center",title:"\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\u65b9\u6848",description:"\u4ee5\u4e0b\u65b9\u6848\u5747\u57fa\u4e8e\u5982\u4e0b\u5e03\u5c40\u548c\u57fa\u7840\u6837\u5f0f\uff1a",source:"@site/docs/book4/css-vertical-horizontal-center.md",sourceDirName:"book4",slug:"/book4/css-vertical-horizontal-center",permalink:"/awesome-interview/book4/css-vertical-horizontal-center",tags:[],version:"current",sidebarPosition:8,frontMatter:{sidebar_label:"\u6837\u5f0f\uff1a\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\u65b9\u6848",sidebar_position:8},sidebar:"tutorialSidebar",previous:{title:"\u57fa\u7840\uff1a\u4ec0\u4e48\u662f TypeScript \u6cdb\u578b",permalink:"/awesome-interview/book4/js-ts-generics"},next:{title:"\u7f16\u7801\uff1a\u5b9e\u73b0 apply/call/bind",permalink:"/awesome-interview/book4/coding-apply-call-bind"}},s={},u=[{value:"flex",id:"flex",level:2},{value:"grid",id:"grid",level:2},{value:"\u76f8\u5bf9\u5b9a\u4f4d",id:"\u76f8\u5bf9\u5b9a\u4f4d",level:2},{value:"1. transform",id:"1-transform",level:3},{value:"2. calc",id:"2-calc",level:3},{value:"\u7edd\u5bf9\u5b9a\u4f4d",id:"\u7edd\u5bf9\u5b9a\u4f4d",level:2},{value:"1. transform",id:"1-transform-1",level:3},{value:"2. calc",id:"2-calc-1",level:3},{value:"3. \u8d1f\u5916\u8fb9\u8ddd",id:"3-\u8d1f\u5916\u8fb9\u8ddd",level:3},{value:"4. \u81ea\u52a8\u5916\u8fb9\u8ddd",id:"4-\u81ea\u52a8\u5916\u8fb9\u8ddd",level:3},{value:"table-cell",id:"table-cell",level:2},{value:"line-height",id:"line-height",level:2}],d={toc:u};function m(e){var n=e.components,t=(0,l.Z)(e,i);return(0,a.kt)("wrapper",(0,r.Z)({},d,t,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\u65b9\u6848"},"\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\u65b9\u6848"),(0,a.kt)("p",null,"\u4ee5\u4e0b\u65b9\u6848\u5747\u57fa\u4e8e\u5982\u4e0b\u5e03\u5c40\u548c\u57fa\u7840\u6837\u5f0f\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html"},'<div id="parent">\n <div id="children">HZFE</div>\n</div>\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css"},"#parent {\n background: red;\n height: 600px;\n}\n\n#children {\n background: blue;\n}\n")),(0,a.kt)("h2",{id:"flex"},"flex"),(0,a.kt)("p",null,"\u9002\u7528\u573a\u666f\uff1a\u5b50\u5143\u7d20\u5bbd\u9ad8\u4e0d\u56fa\u5b9a\u3001\u5b50\u5143\u7d20\u5bbd\u9ad8\u56fa\u5b9a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css"},"#parent {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n")),(0,a.kt)("h2",{id:"grid"},"grid"),(0,a.kt)("p",null,"\u9002\u7528\u573a\u666f\uff1a\u5b50\u5143\u7d20\u5bbd\u9ad8\u4e0d\u56fa\u5b9a\u3001\u5b50\u5143\u7d20\u5bbd\u9ad8\u56fa\u5b9a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css"},"#parent {\n display: grid;\n justify-content: center;\n align-items: center;\n}\n")),(0,a.kt)("h2",{id:"\u76f8\u5bf9\u5b9a\u4f4d"},"\u76f8\u5bf9\u5b9a\u4f4d"),(0,a.kt)("h3",{id:"1-transform"},"1. transform"),(0,a.kt)("p",null,"\u9002\u7528\u573a\u666f\uff1a\u5b50\u5143\u7d20\u5bbd\u9ad8\u4e0d\u56fa\u5b9a\u3001\u5b50\u5143\u7d20\u5bbd\u9ad8\u56fa\u5b9a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css"},"#children {\n display: inline-block;\n position: relative;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n")),(0,a.kt)("p",null,"\u9002\u7528\u573a\u666f\uff1a\u5b50\u5143\u7d20\u5bbd\u9ad8\u56fa\u5b9a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css"},"#children {\n width: 400px;\n height: 300px;\n position: relative;\n top: 50%;\n left: 50%;\n transform: translate(-200px, -150px);\n}\n")),(0,a.kt)("h3",{id:"2-calc"},"2. calc"),(0,a.kt)("p",null,"\u9002\u7528\u573a\u666f\uff1a\u5b50\u5143\u7d20\u5bbd\u9ad8\u56fa\u5b9a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css"},"#children {\n width: 400px;\n height: 300px;\n position: relative;\n top: calc(50% - 150px);\n left: calc(50% - 200px);\n}\n")),(0,a.kt)("h2",{id:"\u7edd\u5bf9\u5b9a\u4f4d"},"\u7edd\u5bf9\u5b9a\u4f4d"),(0,a.kt)("h3",{id:"1-transform-1"},"1. transform"),(0,a.kt)("p",null,"\u9002\u7528\u573a\u666f\uff1a\u5b50\u5143\u7d20\u5bbd\u9ad8\u4e0d\u56fa\u5b9a\u3001\u5b50\u5143\u7d20\u5bbd\u9ad8\u56fa\u5b9a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css"},"#parent {\n position: relative;\n}\n\n#children {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n")),(0,a.kt)("p",null,"\u9002\u7528\u573a\u666f\uff1a\u5b50\u5143\u7d20\u5bbd\u9ad8\u56fa\u5b9a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css"},"#parent {\n position: relative;\n}\n\n#children {\n width: 400px;\n height: 300px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-200px, -150px);\n}\n")),(0,a.kt)("h3",{id:"2-calc-1"},"2. calc"),(0,a.kt)("p",null,"\u9002\u7528\u573a\u666f\uff1a\u5b50\u5143\u7d20\u5bbd\u9ad8\u56fa\u5b9a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css"},"#parent {\n position: relative;\n}\n\n#children {\n width: 400px;\n height: 300px;\n position: absolute;\n top: calc(50% - 150px);\n left: calc(50% - 200px);\n}\n")),(0,a.kt)("h3",{id:"3-\u8d1f\u5916\u8fb9\u8ddd"},"3. \u8d1f\u5916\u8fb9\u8ddd"),(0,a.kt)("p",null,"\u9002\u7528\u573a\u666f\uff1a\u5b50\u5143\u7d20\u5bbd\u9ad8\u56fa\u5b9a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css"},"#parent {\n position: relative;\n}\n\n#children {\n width: 400px;\n height: 300px;\n position: absolute;\n top: 50%;\n left: 50%;\n margin-top: -150px;\n margin-left: -200px;\n}\n")),(0,a.kt)("h3",{id:"4-\u81ea\u52a8\u5916\u8fb9\u8ddd"},"4. \u81ea\u52a8\u5916\u8fb9\u8ddd"),(0,a.kt)("p",null,"\u9002\u7528\u573a\u666f\uff1a\u5b50\u5143\u7d20\u5bbd\u9ad8\u56fa\u5b9a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css"},"#parent {\n position: relative;\n}\n\n#children {\n width: 400px;\n height: 300px;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n}\n")),(0,a.kt)("h2",{id:"table-cell"},"table-cell"),(0,a.kt)("p",null,"\u9002\u7528\u573a\u666f\uff1a\u5b50\u5143\u7d20\u5bbd\u9ad8\u4e0d\u56fa\u5b9a\u3001\u5b50\u5143\u7d20\u5bbd\u9ad8\u56fa\u5b9a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css"},"#parent {\n width: 800px;\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n}\n\n#children {\n display: inline-block;\n}\n")),(0,a.kt)("h2",{id:"line-height"},"line-height"),(0,a.kt)("p",null,"\u524d\u63d0\uff1a\u7236\u5143\u7d20\u9ad8\u5ea6\u56fa\u5b9a"),(0,a.kt)("p",null,"\u9002\u7528\u573a\u666f\uff1a\u5b50\u5143\u7d20\u5bbd\u9ad8\u4e0d\u56fa\u5b9a\u3001\u5b50\u5143\u7d20\u5bbd\u9ad8\u56fa\u5b9a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css"},"#parent {\n line-height: 600px;\n text-align: center;\n}\n\n#children {\n line-height: 1.5;\n display: inline-block;\n vertical-align: middle;\n}\n")))}m.isMDXComponent=!0}}]); |