CSSで中央揃えにする方法＠サンプル
テキストの左右中央揃え
text-align: center;
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、
そこはかとなく書きつくれば、あやしうこそものぐるほしけれ...
テキストの上下中央揃え
line-height:xxx;
1行テキストの時にしか使えません...
display: table-cell;
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、
そこはかとなく書きつくれば、あやしうこそものぐるほしけれ...
display: inline-block;
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、
そこはかとなく書きつくれば、あやしうこそものぐるほしけれ...
BOXの左右中央揃え
margin: 0 auto;
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、
そこはかとなく書きつくれば、あやしうこそものぐるほしけれ...
display: inline-block;
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、
そこはかとなく書きつくれば、あやしうこそものぐるほしけれ...
display: flex;
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、
そこはかとなく書きつくれば、あやしうこそものぐるほしけれ...
position: absolute;
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、
そこはかとなく書きつくれば、あやしうこそものぐるほしけれ...
BOXの上下中央揃え
display: flex;
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、
そこはかとなく書きつくれば、あやしうこそものぐるほしけれ...
position: absolute;
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、
そこはかとなく書きつくれば、あやしうこそものぐるほしけれ...
transform: translateY(-50%);
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、
そこはかとなく書きつくれば、あやしうこそものぐるほしけれ...